mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Deployed d53aa20201 to master with MkDocs 1.2.1 and mike 1.0.1
This commit is contained in:
1 parent
daf05f8dcc
commit
3bbb0e382d
4 files changed
+18
-13
No files matched your search
Binary file not shown.
|
Before Width: | Height: | Size: 251 KiB After Width: | Height: | Size: 712 KiB |
@@ -1050,7 +1050,7 @@ Implementing <code>onDeactivate()</code> gives you the opportunity to clean up a
|
||||
<ol>
|
||||
<li>Navigate to <strong>File</strong> > <strong>Extensions</strong> in the top menu bar.
|
||||
(On Mac, it is <strong>Lens</strong> > <strong>Extensions</strong>.)</li>
|
||||
<li>Click <strong>Disable</strong> on the extension you want to disable.</li>
|
||||
<li>For the extension you want to disable, open the context menu (click on the three vertical dots) and choose <strong>Disable</strong>.</li>
|
||||
</ol>
|
||||
</div>
|
||||
<p>The example above logs messages when the extension is enabled and disabled.</p>
|
||||
@@ -1059,7 +1059,7 @@ Implementing <code>onDeactivate()</code> gives you the opportunity to clean up a
|
||||
Use cluster pages to display information about or add functionality to the active cluster.
|
||||
It is also possible to include custom details from other clusters.
|
||||
Use your extension to access Kubernetes resources in the active cluster with <a href="../stores#Clusterstore"><code>ClusterStore.getInstance()</code></a>.</p>
|
||||
<p>Add a cluster page definition to a <code>LensRendererExtension</code> subclass with the following example:</p>
|
||||
<p>Add a cluster page definition to a <code>Renderer.LensExtension</code> subclass with the following example:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExampleIcon</span><span class="p">,</span> <span class="nx">ExamplePage</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"./page"</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span>
|
||||
@@ -1103,7 +1103,7 @@ This way, <code>ExamplePage</code> can access all <code>ExampleExtension</code>
|
||||
<p>The above example shows how to create a cluster page, but not how to make that page available to the Lens user.
|
||||
Use <code>clusterPageMenus</code>, covered in the next section, to add cluster pages to the Lens UI.</p>
|
||||
<h3 id="clusterpagemenus"><code>clusterPageMenus</code><a class="headerlink" href="#clusterpagemenus" title="Permanent link">#</a></h3>
|
||||
<p><code>clusterPageMenus</code> allows you to add cluster page menu items to the secondary left nav.</p>
|
||||
<p><code>clusterPageMenus</code> allows you to add cluster page menu items to the secondary left nav, below Lens's standard cluster menus like <strong>Workloads</strong>, <strong>Custom Resources</strong>, etc.</p>
|
||||
<p>By expanding on the above example, you can add a cluster page menu item to the <code>ExampleExtension</code> definition:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExampleIcon</span><span class="p">,</span> <span class="nx">ExamplePage</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"./page"</span>
|
||||
@@ -1232,14 +1232,13 @@ 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 <code>parentId</code> field to the id of the parent of a foldout submenu, <code>"example"</code> in this case.</p>
|
||||
<p>This is what the example will look like, including how the menu item will appear in the secondary left nav:</p>
|
||||
<p>This is what the example could look like, including how the menu item will appear in the secondary left nav:</p>
|
||||
<p><img alt="Cluster Page Menus" src="../images/clusterpagemenus.png" /></p>
|
||||
<h3 id="globalpages"><code>globalPages</code><a class="headerlink" href="#globalpages" title="Permanent link">#</a></h3>
|
||||
<p>Global pages are independent of the cluster dashboard and can fill the entire Lens UI.
|
||||
Their primary use is to display information and provide functionality across clusters, including customized data and functionality unique to your extension.</p>
|
||||
<p>Typically, you would use a <a href="#globalpagemenus">global page menu</a> located in the left nav to trigger a global page.
|
||||
You can also trigger a global page with a <a href="../main-extension#appmenus">custom app menu selection</a> from a Main Extension or a <a href="#statusbaritems">custom status bar item</a>.
|
||||
Unlike cluster pages, users can trigger global pages even when there is no active cluster.</p>
|
||||
<p>The following example defines a <code>LensRendererExtension</code> subclass with a single global page definition:</p>
|
||||
Their primary use is to display information and provide functionality across clusters (or catalog entities), including customized data and functionality unique to your extension.</p>
|
||||
<p>Unlike cluster pages, users can trigger global pages even when there is no active cluster (or catalog entity).</p>
|
||||
<p>The following example defines a <code>Renderer.LensExtension</code> subclass with a single global page definition:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s1">'@k8slens/extensions'</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">HelpPage</span> <span class="p">}</span> <span class="k">from</span> <span class="s1">'./page'</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s1">'react'</span><span class="p">;</span>
|
||||
@@ -1281,11 +1280,11 @@ It offers flexibility in defining the appearance and behavior of your page.</li>
|
||||
This allows the <code>HelpExtension</code> object to be passed in the global page definition in the React-style.
|
||||
This way, <code>HelpPage</code> can access all <code>HelpExtension</code> subclass data.</p>
|
||||
<p>This example code shows how to create a global page, but not how to make that page available to the Lens user.
|
||||
Global pages can be made available in the following ways:</p>
|
||||
Global pages are typically made available in the following ways:</p>
|
||||
<ul>
|
||||
<li>To add global pages to the top menu bar, see <a href="../main-extension#appmenus"><code>appMenus</code></a> in the Main Extension guide.</li>
|
||||
<li>To add global pages as an interactive element in the blue status bar along the bottom of the Lens UI, see <a href="#statusbaritems"><code>statusBarItems</code></a>.</li>
|
||||
<li>To add global pages to the left side menu, see <a href="#globalpagemenus"><code>globalPageMenus</code></a>.</li>
|
||||
<li>To add global pages to the Welcome Page, see <a href="#welcomemenus"><code>welcomeMenus</code></a>.</li>
|
||||
</ul>
|
||||
<h3 id="welcomemenus"><code>welcomeMenus</code><a class="headerlink" href="#welcomemenus" title="Permanent link">#</a></h3>
|
||||
<h3 id="apppreferences"><code>appPreferences</code><a class="headerlink" href="#apppreferences" title="Permanent link">#</a></h3>
|
||||
@@ -1331,6 +1330,7 @@ This is how <code>ExampleRendererExtension</code> handles the state of the prefe
|
||||
<code>ExampleRendererExtension</code> has a <code>preference</code> field, which you will add to <code>ExamplePreferenceInput</code>.</p>
|
||||
<p>In this example <code>ExamplePreferenceInput</code>, <code>ExamplePreferenceHint</code>, and <code>ExamplePreferenceProps</code> are defined in <code>./src/example-preference.tsx</code> as follows:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">makeObservable</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"mobx"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">observer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"mobx-react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
|
||||
@@ -1349,6 +1349,11 @@ This is how <code>ExampleRendererExtension</code> handles the state of the prefe
|
||||
<span class="kd">@observer</span>
|
||||
<span class="k">export</span> <span class="kd">class</span> <span class="nx">ExamplePreferenceInput</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="o"><</span><span class="nx">ExamplePreferenceProps</span><span class="o">></span> <span class="p">{</span>
|
||||
|
||||
<span class="k">public</span> <span class="kr">constructor</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">super</span><span class="p">({</span><span class="nx">preference</span><span class="o">:</span> <span class="p">{</span> <span class="nx">enabled</span>: <span class="kt">false</span><span class="p">}});</span>
|
||||
<span class="nx">makeObservable</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">const</span> <span class="p">{</span> <span class="nx">preference</span> <span class="p">}</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">;</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
@@ -1379,7 +1384,7 @@ This is how <code>ExampleRendererExtension</code> handles the state of the prefe
|
||||
This is an object with the single <code>enabled</code> property.
|
||||
It is used to indicate the state of the preference, and it is bound to the checkbox state in <code>onChange</code>.</p>
|
||||
<p><code>ExamplePreferenceHint</code> is a simple text span.</p>
|
||||
<p>The above example introduces the decorators <code>observable</code> and <code>observer</code> from the <a href="https://mobx.js.org/README.html"><code>mobx</code></a> and <a href="https://github.com/mobxjs/mobx-react#mobx-react"><code>mobx-react</code></a> packages.
|
||||
<p>The above example introduces the decorators <code>makeObservable</code> and <code>observer</code> from the <a href="https://mobx.js.org/README.html"><code>mobx</code></a> and <a href="https://github.com/mobxjs/mobx-react#mobx-react"><code>mobx-react</code></a> packages.
|
||||
<code>mobx</code> simplifies state management.
|
||||
Without it, this example would not visually update the checkbox properly when the user activates it.
|
||||
<a href="../working-with-mobx">Lens uses <code>mobx</code></a> extensively for state management of its own UI elements.
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"config":{"indexing":"full","lang":["en"],"min_search_length":3,"prebuild_index":false,"separator":"[\\s\\-]+"},"docs":[{"location":"","text":"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. To install your first extension you should goto the extension page in lens. This documentation describes: How to build, run, test, and publish an extension. How to take full advantage of the Lens Extension API. Where to find guides and code samples to help get you started. What Extensions Can Do # Here are some examples of what you can achieve with the Extension API: Add custom components & views in the UI - Extending the Lens Workbench For an overview of the Lens Extension API, refer to the Common Capabilities page. Extension Guides Overview also includes a list of code samples and guides that illustrate various ways of using the Lens Extension API. How to Build Extensions # Here is what each section of the Lens Extension API docs can help you with: Getting Started teaches fundamental concepts for building extensions with the Hello World sample. Extension Capabilities dissects Lens's Extension API into smaller categories and points you to more detailed topics. Extension Guides includes guides and code samples that explain specific usages of Lens Extension API. Testing and Publishing includes in-depth guides on various extension development topics, such as testing and publishing extensions. API Reference contains exhaustive references for the Lens Extension API, Contribution Points, and many other topics. What's New # Just like Lens itself, the extension API updates on a monthly cadence, rolling out new features with every release. Keep up with Lens and the Lens Extension API by reviewing the release notes . Important changes since Lens v4 # Lens has undergone major design improvements in v5, which have resulted in several large changes to the extension API. Workspaces are gone, and the catalog is introduced for containing clusters, as well as other items, including custom entities. Lens has migrated from using mobx 5 to mobx 6 for internal state management, and this may have ramifications for extension implementations. Although the API retains many components from v4, given these changes, extensions written for Lens v4 are not compatible with the Lens v5 extension API. See the Lens v4 to v5 extension migration notes on getting old extensions working in Lens v5. Looking for Help # If you have questions for extension development, try asking on the Lens Dev Slack . It's a public chatroom for Lens developers, where Lens team members chime in from time to time. To provide feedback on the documentation or issues with the Lens Extension API, create new issues at lensapp/lens . Please use the labels area/documentation and/or area/extension . Downloading Lens # Download Lens for macOS, Windows, or Linux.","title":"Overview"},{"location":"#lens-extension-api","text":"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. To install your first extension you should goto the extension page in lens. This documentation describes: How to build, run, test, and publish an extension. How to take full advantage of the Lens Extension API. Where to find guides and code samples to help get you started.","title":"Lens Extension API"},{"location":"#what-extensions-can-do","text":"Here are some examples of what you can achieve with the Extension API: Add custom components & views in the UI - Extending the Lens Workbench For an overview of the Lens Extension API, refer to the Common Capabilities page. Extension Guides Overview also includes a list of code samples and guides that illustrate various ways of using the Lens Extension API.","title":"What Extensions Can Do"},{"location":"#how-to-build-extensions","text":"Here is what each section of the Lens Extension API docs can help you with: Getting Started teaches fundamental concepts for building extensions with the Hello World sample. Extension Capabilities dissects Lens's Extension API into smaller categories and points you to more detailed topics. Extension Guides includes guides and code samples that explain specific usages of Lens Extension API. Testing and Publishing includes in-depth guides on various extension development topics, such as testing and publishing extensions. API Reference contains exhaustive references for the Lens Extension API, Contribution Points, and many other topics.","title":"How to Build Extensions"},{"location":"#whats-new","text":"Just like Lens itself, the extension API updates on a monthly cadence, rolling out new features with every release. Keep up with Lens and the Lens Extension API by reviewing the release notes .","title":"What's New"},{"locationLine truncated
|
||||
{"config":{"indexing":"full","lang":["en"],"min_search_length":3,"prebuild_index":false,"separator":"[\\s\\-]+"},"docs":[{"location":"","text":"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. To install your first extension you should goto the extension page in lens. This documentation describes: How to build, run, test, and publish an extension. How to take full advantage of the Lens Extension API. Where to find guides and code samples to help get you started. What Extensions Can Do # Here are some examples of what you can achieve with the Extension API: Add custom components & views in the UI - Extending the Lens Workbench For an overview of the Lens Extension API, refer to the Common Capabilities page. Extension Guides Overview also includes a list of code samples and guides that illustrate various ways of using the Lens Extension API. How to Build Extensions # Here is what each section of the Lens Extension API docs can help you with: Getting Started teaches fundamental concepts for building extensions with the Hello World sample. Extension Capabilities dissects Lens's Extension API into smaller categories and points you to more detailed topics. Extension Guides includes guides and code samples that explain specific usages of Lens Extension API. Testing and Publishing includes in-depth guides on various extension development topics, such as testing and publishing extensions. API Reference contains exhaustive references for the Lens Extension API, Contribution Points, and many other topics. What's New # Just like Lens itself, the extension API updates on a monthly cadence, rolling out new features with every release. Keep up with Lens and the Lens Extension API by reviewing the release notes . Important changes since Lens v4 # Lens has undergone major design improvements in v5, which have resulted in several large changes to the extension API. Workspaces are gone, and the catalog is introduced for containing clusters, as well as other items, including custom entities. Lens has migrated from using mobx 5 to mobx 6 for internal state management, and this may have ramifications for extension implementations. Although the API retains many components from v4, given these changes, extensions written for Lens v4 are not compatible with the Lens v5 extension API. See the Lens v4 to v5 extension migration notes on getting old extensions working in Lens v5. Looking for Help # If you have questions for extension development, try asking on the Lens Dev Slack . It's a public chatroom for Lens developers, where Lens team members chime in from time to time. To provide feedback on the documentation or issues with the Lens Extension API, create new issues at lensapp/lens . Please use the labels area/documentation and/or area/extension . Downloading Lens # Download Lens for macOS, Windows, or Linux.","title":"Overview"},{"location":"#lens-extension-api","text":"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. To install your first extension you should goto the extension page in lens. This documentation describes: How to build, run, test, and publish an extension. How to take full advantage of the Lens Extension API. Where to find guides and code samples to help get you started.","title":"Lens Extension API"},{"location":"#what-extensions-can-do","text":"Here are some examples of what you can achieve with the Extension API: Add custom components & views in the UI - Extending the Lens Workbench For an overview of the Lens Extension API, refer to the Common Capabilities page. Extension Guides Overview also includes a list of code samples and guides that illustrate various ways of using the Lens Extension API.","title":"What Extensions Can Do"},{"location":"#how-to-build-extensions","text":"Here is what each section of the Lens Extension API docs can help you with: Getting Started teaches fundamental concepts for building extensions with the Hello World sample. Extension Capabilities dissects Lens's Extension API into smaller categories and points you to more detailed topics. Extension Guides includes guides and code samples that explain specific usages of Lens Extension API. Testing and Publishing includes in-depth guides on various extension development topics, such as testing and publishing extensions. API Reference contains exhaustive references for the Lens Extension API, Contribution Points, and many other topics.","title":"How to Build Extensions"},{"location":"#whats-new","text":"Just like Lens itself, the extension API updates on a monthly cadence, rolling out new features with every release. Keep up with Lens and the Lens Extension API by reviewing the release notes .","title":"What's New"},{"locationLine truncated
|
||||
Binary file not shown.
Reference in new issue
Block a user