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

Deployed 656797ab to latest with MkDocs 1.1.2 and mike 0.5.5

Browse Source
This commit is contained in:
GitHub Action committed 2020-11-16 09:17:09 +00:00
1 parent 4b7d627edb
commit c8a79ab626
225 files changed
+7575 -10242
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

latest/extensions/get-started/anatomy/index.html
+34 -46
View File
@@ -271,7 +271,7 @@
<li class="md-nav__item">
<a href="../../../clusters/adding-clusters/" class="md-nav__link">
Adding clusters
Adding Clusters
</a>
</li>
@@ -283,7 +283,7 @@
<li class="md-nav__item">
<a href="../../../clusters/removing-clusters/" class="md-nav__link">
Removing cluster
Removing Clusters
</a>
</li>
@@ -388,13 +388,13 @@
<input class="md-nav__toggle md-toggle" data-md-toggle="nav-7-2" type="checkbox" id="nav-7-2" checked>
<label class="md-nav__link" for="nav-7-2">
Get Started
Getting Started
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Get Started" data-md-level="2">
<nav class="md-nav" aria-label="Getting Started" data-md-level="2">
<label class="md-nav__title" for="nav-7-2">
<span class="md-nav__icon md-icon"></span>
Get Started
Getting Started
</label>
<ul class="md-nav__list" data-md-scrollfix>
@@ -404,6 +404,18 @@
<li class="md-nav__item">
<a href="../overview/" class="md-nav__link">
Overview
</a>
</li>
<li class="md-nav__item">
<a href="../your-first-extension/" class="md-nav__link">
Your First Extension
@@ -524,18 +536,6 @@
<li class="md-nav__item">
<a href="../../capabilities/" class="md-nav__link">
Overview
</a>
</li>
<li class="md-nav__item">
<a href="../../capabilities/common-capabilities/" class="md-nav__link">
Common Capabilities
@@ -562,7 +562,7 @@
<li class="md-nav__item">
<a href="../../capabilities/color-reference/" class="md-nav__link">
Color reference
Color Reference
</a>
</li>
@@ -667,18 +667,6 @@
</li>
<li class="md-nav__item">
<a href="../../testing-and-publishing/bundling/" class="md-nav__link">
Bundling Extensions
</a>
</li>
</ul>
</nav>
</li>
@@ -869,14 +857,14 @@
<h1 id="extension-anatomy">Extension Anatomy<a class="headerlink" href="#extension-anatomy" title="Permanent link">#</a></h1>
<p>You've now learnt how to get basic extension running. In this topic you will learn some fundamental concepts to Lens Extension development; How does it work under the hood?</p>
<p><code>Hello World</code> extension does three things:</p>
<p>In the <a href="../your-first-extension/">previous section</a> you learned how to create your first extension. In this section you will learn how this extension works under the hood.</p>
<p>The Hello World sample extension does three things:</p>
<ul>
<li>Hooks on <code>onActivate()</code> and ouputs message into console.</li>
<li>Hooks on <code>onDectivate()</code> and ouputs message into console.</li>
<li>Registers <code>ClusterPage</code> so that page is visible in the sidebars of cluster dashboards.</li>
<li>Implements <code>onActivate()</code> and outputs a message to the console.</li>
<li>Implements <code>onDectivate()</code> and outputs a message to the console.</li>
<li>Registers <code>ClusterPage</code> so that the page is visible in the left-side menu of the cluster dashboard.</li>
</ul>
<p>Let's take a closer look at Hello World sample's source code and see how to achieve these things.</p>
<p>Let's take a closer look at our Hello World sample's source code and see how these three things are achieved.</p>
<h2 id="extension-file-structure">Extension File Structure<a class="headerlink" href="#extension-file-structure" title="Permanent link">#</a></h2>
<div class="highlight"><pre><span></span><code>.
├── .gitignore // Ignore build output and node_modules
@@ -890,14 +878,14 @@
├── tsconfig.json // TypeScript configuration
├── webpack.config.js // Webpack configuration
</code></pre></div>
<p>Extension directory contains extension's entry files and few configuration files. Let's focus on <code>package.json</code>, <code>main.ts</code> and <code>renderer.tsx</code> which are essential to understanding the <code>Hello World</code> extension.</p>
<p>The extension directory contains the extension's entry files and a few configuration files. Three files: <code>package.json</code>, <code>main.ts</code> and <code>renderer.tsx</code> are essential to understanding the Hello World sample extension. We'll look at those first.</p>
<h3 id="extension-manifest">Extension Manifest<a class="headerlink" href="#extension-manifest" title="Permanent link">#</a></h3>
<p>Each Lens extension must have <code>package.json</code>. The <code>package.json</code> contains a mix of Node.js fields such as scripts and dependencies and Lens specific fields such as <code>publisher</code> and <code>contributes</code>. Here are some most important fields:</p>
<p>Each Lens extension must have a <code>package.json</code> file. It contains a mix of Node.js fields, including scripts and dependencies, and Lens-specific fields such as <code>publisher</code> and <code>contributes</code>. Some of the most-important fields include:</p>
<ul>
<li><code>name</code> and <code>publisher</code>: Lens uses <code>@&lt;publisher&gt;/&lt;name&gt;</code> as a unique ID for the extension. For example, the Hello World sample has the ID <code>@lensapp-samples/helloworld-sample</code>. Lens uses the ID to uniquely identify your extension</li>
<li><code>main</code>: The extension's entry point run in <code>main</code> process.</li>
<li><code>renderer</code>: The extension's entry point run in <code>renderer</code> process.</li>
<li><code>engines.lens</code>: This specifies the minimum version of Lens API that the extension depends on.</li>
<li><code>name</code> and <code>publisher</code>: Lens uses <code>@&lt;publisher&gt;/&lt;name&gt;</code> as a unique ID for the extension. For example, the Hello World sample has the ID <code>@lensapp-samples/helloworld-sample</code>. Lens uses this ID to uniquely identify your extension.</li>
<li><code>main</code>: the extension's entry point run in <code>main</code> process.</li>
<li><code>renderer</code>: the extension's entry point run in <code>renderer</code> process.</li>
<li><code>engines.lens</code>: the minimum version of Lens API that the extension depends upon.</li>
</ul>
<div class="highlight"><pre><span></span><code><span class="p">{</span>
<span class="s2">&quot;name&quot;</span><span class="o">:</span> <span class="s2">&quot;helloworld-sample&quot;</span><span class="p">,</span>
@@ -930,9 +918,9 @@
<span class="p">}</span>
</code></pre></div>
<h2 id="extension-entry-files">Extension Entry Files<a class="headerlink" href="#extension-entry-files" title="Permanent link">#</a></h2>
<p>Lens extensions can have two separate entry files. One file that is used in <code>main</code> process of Lens application and antoher that is used in <code>renderer</code> process. <code>main</code> entry file should export class that extends <code>LensMainExtension</code> and <code>renderer</code> entry file should export class that extends <code>LensRendererExtension</code>.</p>
<p>Both extensions classes have <code>onActivate</code> and <code>onDeactivate</code> methods. <code>onActivate</code> is executed when your extension activation happens. You may want to initialize something in your extension at this point. <code>onDeactivate</code> gives you a chance to clean up before your extension becomes deactivated. For many extensions, explicit cleanup may not be required, and you don't need to override this method. However, if an extension needs to perform an operation when Lens is shutting down or the extension is disabled or uninstalled, this is the method to do so.</p>
<p><code>Hello world</code> extension does not do anything special on <code>main</code> process, so let's focus on the <code>renderer</code> side. On <code>renderer</code> entry point, <code>Hello world</code> extension defines one <code>Cluster Page</code> object that registers <code>/extension-example</code> path that renders <code>ExamplePage</code> React component. It registers also <code>MenuItem</code> component that displays <code>ExampleIcon</code> React component and "Hello World" text in the sidebar of cluster dashboards. These React components are defined in additional <code>./src/page.tsx</code> file.</p>
<p>Lens extensions can have two separate entry files. One file is used in the <code>main</code> process of the Lens application and the other is used in the <code>renderer</code> process. The <code>main</code> entry file exports the class that extends <code>LensMainExtension</code>, and the <code>renderer</code> entry file exports the class that extends <code>LensRendererExtension</code>.</p>
<p>Both extension classes have <code>onActivate</code> and <code>onDeactivate</code> methods. The <code>onActivate</code> 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 <code>onDeactivate</code> 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.</p>
<p>The Hello World sample extension does not do anything on the <code>main</code> process, so we'll focus on the <code>renderer</code> process, instead. On the <code>renderer</code> entry point, the Hello World sample extension defines the <code>Cluster Page</code> object. The <code>Cluster Page</code> object registers the <code>/extension-example</code> path, and this path renders the <code>ExamplePage</code> React component. It also registers the <code>MenuItem</code> component that displays the <code>ExampleIcon</code> React component and the "Hello World" text in the left-side menu of the cluster dashboard. These React components are defined in the additional <code>./src/page.tsx</code> file.</p>
<div class="highlight"><pre><span></span><code><span class="kr">import</span> <span class="p">{</span> <span class="nx">LensRendererExtension</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&quot;@k8slens/extensions&quot;</span><span class="p">;</span>
<span class="kr">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="nx">from</span> <span class="s2">&quot;./page&quot;</span>
<span class="kr">import</span> <span class="nx">React</span> <span class="nx">from</span> <span class="s2">&quot;react&quot;</span>
@@ -948,7 +936,7 @@
<span class="p">]</span>
<span class="p">}</span>
</code></pre></div>
<p><code>Hello World</code> extension uses only one capability (<code>Cluster Page</code>) of Lens extensions. The <a href="/extensions/capabilities/">Extension Capabilities Overview</a> topic helps you find the right capabilities you can use with your own extension.</p>
<p>The Hello World sample extension uses the <code>Cluster Page</code> capability, which is just one of the Lens extension API's capabilities. The <a href="../../capabilities/common-capabilities/">Common Capabilities</a> page will help you home in on the right capabilities to use with your own extensions. </p>
latest/extensions/get-started/overview/index.html
+116 -45
View File
@@ -19,7 +19,7 @@
<title>Extension Development Overview - Lens Documentation</title>
<title>Overview - Lens Documentation</title>
@@ -106,7 +106,7 @@
<div class="md-header-nav__topic">
<span class="md-ellipsis">
Extension Development Overview
Overview
</span>
</div>
@@ -271,7 +271,7 @@
<li class="md-nav__item">
<a href="../../../clusters/adding-clusters/" class="md-nav__link">
Adding clusters
Adding Clusters
</a>
</li>
@@ -283,7 +283,7 @@
<li class="md-nav__item">
<a href="../../../clusters/removing-clusters/" class="md-nav__link">
Removing cluster
Removing Clusters
</a>
</li>
@@ -345,10 +345,12 @@
<li class="md-nav__item md-nav__item--nested">
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="nav-7" type="checkbox" id="nav-7">
<input class="md-nav__toggle md-toggle" data-md-toggle="nav-7" type="checkbox" id="nav-7" checked>
<label class="md-nav__link" for="nav-7">
Extension Development
@@ -378,19 +380,21 @@
<li class="md-nav__item md-nav__item--nested">
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="nav-7-2" type="checkbox" id="nav-7-2">
<input class="md-nav__toggle md-toggle" data-md-toggle="nav-7-2" type="checkbox" id="nav-7-2" checked>
<label class="md-nav__link" for="nav-7-2">
Get Started
Getting Started
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Get Started" data-md-level="2">
<nav class="md-nav" aria-label="Getting Started" data-md-level="2">
<label class="md-nav__title" for="nav-7-2">
<span class="md-nav__icon md-icon"></span>
Get Started
Getting Started
</label>
<ul class="md-nav__list" data-md-scrollfix>
@@ -399,6 +403,63 @@
<li class="md-nav__item md-nav__item--active">
<input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
<label class="md-nav__link md-nav__link--active" for="__toc">
Overview
<span class="md-nav__icon md-icon"></span>
</label>
<a href="./" class="md-nav__link md-nav__link--active">
Overview
</a>
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="#required" class="md-nav__link">
Required:
</a>
</li>
<li class="md-nav__item">
<a href="#recommended" class="md-nav__link">
Recommended:
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../your-first-extension/" class="md-nav__link">
@@ -462,18 +523,6 @@
<li class="md-nav__item">
<a href="../../capabilities/" class="md-nav__link">
Overview
</a>
</li>
<li class="md-nav__item">
<a href="../../capabilities/common-capabilities/" class="md-nav__link">
Common Capabilities
@@ -500,7 +549,7 @@
<li class="md-nav__item">
<a href="../../capabilities/color-reference/" class="md-nav__link">
Color reference
Color Reference
</a>
</li>
@@ -605,18 +654,6 @@
</li>
<li class="md-nav__item">
<a href="../../testing-and-publishing/bundling/" class="md-nav__link">
Bundling Extensions
</a>
</li>
</ul>
</nav>
</li>
@@ -773,8 +810,8 @@
</li>
<li class="md-nav__item">
<a href="#recommened" class="md-nav__link">
Recommened:
<a href="#recommended" class="md-nav__link">
Recommended:
</a>
</li>
@@ -794,19 +831,18 @@
<h1 id="extension-development-overview">Extension Development Overview<a class="headerlink" href="#extension-development-overview" title="Permanent link">#</a></h1>
<p>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 that might help.</p>
<p>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.</p>
<h3 id="required">Required:<a class="headerlink" href="#required" title="Permanent link">#</a></h3>
<ul>
<li><a href="https://www.nodejs.org/en/">Node.js</a></li>
<li><a href="https://www.git-scm.com/">Git</a></li>
<li>Some sort of text editor, we recommend <a href="https://code.visualstudio.com/">VSCode</a></li>
<li>Some sort of text editor – we recommend <a href="https://code.visualstudio.com/">VSCode</a></li>
<li>We use <a href="https://www.webpack.js.org/">Webpack</a> for compilation. All extension need to be at least compatable with a webpack system.</li>
</ul>
<h3 id="recommened">Recommened:<a class="headerlink" href="#recommened" title="Permanent link">#</a></h3>
<p>-</p>
<p>All <em>Lens</em> extensions are javascript packages. We recommend that you program in <a href="https://www.typescriptlang.org/">Typescript</a> because it catches quite a few easily to make errors around passing data around in javascript.</p>
<p><em>Lens</em> is a standard <a href="https://www.electronjs.org/">Electron</a> application which both main and renderer processes. An extension is made up of two parts, one for each of <em>Lens</em>'s core processes. When an extension is loaded each part is loaded and then notified that it has been loaded. From there the extension can start doing is work.</p>
<p><em>Lens</em> uses <a href="https://www.reactjs.org/">React</a> as it UI framework and even provides some of our own components for reuse by 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.</p>
<h3 id="recommended">Recommended:<a class="headerlink" href="#recommended" title="Permanent link">#</a></h3>
<p>All Lens extensions are javascript packages. We recommend that you program in <a href="https://www.typescriptlang.org/">Typescript</a> because it catches many common errors.</p>
<p>Lens is a standard <a href="https://www.electronjs.org/">Electron</a> 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.</p>
<p>Lens uses <a href="https://www.reactjs.org/">React</a> 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.</p>
<p>See <a href="../your-first-extension/">Your First Extension</a> to get started.</p>
@@ -823,6 +859,41 @@
<footer class="md-footer">
<div class="md-footer-nav">
<nav class="md-footer-nav__inner md-grid" aria-label="Footer">
<a href="../../" class="md-footer-nav__link md-footer-nav__link--prev" rel="prev">
<div class="md-footer-nav__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
</div>
<div class="md-footer-nav__title">
<div class="md-ellipsis">
<span class="md-footer-nav__direction">
Previous
</span>
Overview
</div>
</div>
</a>
<a href="../your-first-extension/" class="md-footer-nav__link md-footer-nav__link--next" rel="next">
<div class="md-footer-nav__title">
<div class="md-ellipsis">
<span class="md-footer-nav__direction">
Next
</span>
Your First Extension
</div>
</div>
<div class="md-footer-nav__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11H4z"/></svg>
</div>
</a>
</nav>
</div>
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-footer-copyright">
latest/extensions/get-started/wrapping-up/index.html
+30 -42
View File
@@ -271,7 +271,7 @@
<li class="md-nav__item">
<a href="../../../clusters/adding-clusters/" class="md-nav__link">
Adding clusters
Adding Clusters
</a>
</li>
@@ -283,7 +283,7 @@
<li class="md-nav__item">
<a href="../../../clusters/removing-clusters/" class="md-nav__link">
Removing cluster
Removing Clusters
</a>
</li>
@@ -388,13 +388,13 @@
<input class="md-nav__toggle md-toggle" data-md-toggle="nav-7-2" type="checkbox" id="nav-7-2" checked>
<label class="md-nav__link" for="nav-7-2">
Get Started
Getting Started
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Get Started" data-md-level="2">
<nav class="md-nav" aria-label="Getting Started" data-md-level="2">
<label class="md-nav__title" for="nav-7-2">
<span class="md-nav__icon md-icon"></span>
Get Started
Getting Started
</label>
<ul class="md-nav__list" data-md-scrollfix>
@@ -404,6 +404,18 @@
<li class="md-nav__item">
<a href="../overview/" class="md-nav__link">
Overview
</a>
</li>
<li class="md-nav__item">
<a href="../your-first-extension/" class="md-nav__link">
Your First Extension
@@ -467,8 +479,8 @@
</li>
<li class="md-nav__item">
<a href="#guides-samples" class="md-nav__link">
Guides &amp; Samples
<a href="#guides-and-samples" class="md-nav__link">
Guides and Samples
</a>
</li>
@@ -518,18 +530,6 @@
<li class="md-nav__item">
<a href="../../capabilities/" class="md-nav__link">
Overview
</a>
</li>
<li class="md-nav__item">
<a href="../../capabilities/common-capabilities/" class="md-nav__link">
Common Capabilities
@@ -556,7 +556,7 @@
<li class="md-nav__item">
<a href="../../capabilities/color-reference/" class="md-nav__link">
Color reference
Color Reference
</a>
</li>
@@ -661,18 +661,6 @@
</li>
<li class="md-nav__item">
<a href="../../testing-and-publishing/bundling/" class="md-nav__link">
Bundling Extensions
</a>
</li>
</ul>
</nav>
</li>
@@ -829,8 +817,8 @@
</li>
<li class="md-nav__item">
<a href="#guides-samples" class="md-nav__link">
Guides &amp; Samples
<a href="#guides-and-samples" class="md-nav__link">
Guides and Samples
</a>
</li>
@@ -857,15 +845,15 @@
<h1 id="wrapping-up">Wrapping Up<a class="headerlink" href="#wrapping-up" title="Permanent link">#</a></h1>
<p>In the <a href="../your-first-extension/">Your First Extension</a> topic, you learned how to create and run an extension. In the <a href="../anatomy/">Extension Anatomy</a> topic, you learned fundamental concepts to Lens extension development. However, this is just a small glimpse of what can be created with Lens Extensions. Below are some suggested routes for furthering your Lens extension development skills.</p>
<p>In <a href="../your-first-extension/">Your First Extension</a>, you learned how to create and run an extension. In <a href="../anatomy/">Extension Anatomy</a>, you learned in detail how a basic extension works. This is just a glimpse into what can be created with Lens extensions. Below are some suggested routes for learning more.</p>
<h2 id="extension-capabilities">Extension Capabilities<a class="headerlink" href="#extension-capabilities" title="Permanent link">#</a></h2>
<p>In this section, we split the Lens extension points into a few categories, each with short descriptions as to what your extension could achieve. Validate that your extension idea is achievable by reading the <a href="../capabilities/overview.md">Extension Capabilities</a> section for new extension ideas.</p>
<h2 id="guides-samples">Guides &amp; Samples<a class="headerlink" href="#guides-samples" title="Permanent link">#</a></h2>
<p>We have a great collection of sample extensions that you can adapt from, and some of them include a detailed guide that explains the source code. You can find all Samples &amp; Guides in the <a href="https://github.com/lensapp/lens-extension-samples">lens-extension-samples</a> repository.</p>
<p>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 <a href="../../capabilities/common-capabilities/">Common Capabilities</a> page.</p>
<h2 id="guides-and-samples">Guides and Samples<a class="headerlink" href="#guides-and-samples" title="Permanent link">#</a></h2>
<p>Here you'll find a collection of sample extensions that you can use as a base to work from. Some of these samples include a detailed guide that explains the source code. You can find all samples and guides in the <a href="https://github.com/lensapp/lens-extension-samples">lens-extension-samples</a> repository.</p>
<h2 id="testing-and-publishing">Testing and Publishing<a class="headerlink" href="#testing-and-publishing" title="Permanent link">#</a></h2>
<p>This section includes topics that help you develop high-quality Lens extensions. For example, you can learn</p>
<p>In this section, you can learn:</p>
<ul>
<li>How to add <a href="../../testing-and-publishing/testing/">integration tests</a> for your extension</li>
<li>How to add <a href="../../testing-and-publishing/testing/">integration tests</a> to your extension</li>
<li>How to <a href="../../testing-and-publishing/publishing/">publish your extension</a></li>
</ul>
@@ -901,13 +889,13 @@
</a>
<a href="../../capabilities/" class="md-footer-nav__link md-footer-nav__link--next" rel="next">
<a href="../../capabilities/common-capabilities/" class="md-footer-nav__link md-footer-nav__link--next" rel="next">
<div class="md-footer-nav__title">
<div class="md-ellipsis">
<span class="md-footer-nav__direction">
Next
</span>
Overview
Common Capabilities
</div>
</div>
<div class="md-footer-nav__button md-icon">
latest/extensions/get-started/your-first-extension/index.html
+79 -77
View File
@@ -271,7 +271,7 @@
<li class="md-nav__item">
<a href="../../../clusters/adding-clusters/" class="md-nav__link">
Adding clusters
Adding Clusters
</a>
</li>
@@ -283,7 +283,7 @@
<li class="md-nav__item">
<a href="../../../clusters/removing-clusters/" class="md-nav__link">
Removing cluster
Removing Clusters
</a>
</li>
@@ -388,13 +388,13 @@
<input class="md-nav__toggle md-toggle" data-md-toggle="nav-7-2" type="checkbox" id="nav-7-2" checked>
<label class="md-nav__link" for="nav-7-2">
Get Started
Getting Started
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Get Started" data-md-level="2">
<nav class="md-nav" aria-label="Getting Started" data-md-level="2">
<label class="md-nav__title" for="nav-7-2">
<span class="md-nav__icon md-icon"></span>
Get Started
Getting Started
</label>
<ul class="md-nav__list" data-md-scrollfix>
@@ -403,6 +403,18 @@
<li class="md-nav__item">
<a href="../overview/" class="md-nav__link">
Overview
</a>
</li>
@@ -436,23 +448,23 @@
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="#installing-and-building-the-extension" class="md-nav__link">
Installing and Building the extension
<a href="#install-the-extension" class="md-nav__link">
Install the Extension
</a>
<nav class="md-nav" aria-label="Installing and Building the extension">
<nav class="md-nav" aria-label="Install the Extension">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#setup-the-extension-directory" class="md-nav__link">
Setup the extension directory
<a href="#linux-macos" class="md-nav__link">
Linux &amp; macOS
</a>
</li>
<li class="md-nav__item">
<a href="#build-the-extension" class="md-nav__link">
Build the extension
<a href="#windows" class="md-nav__link">
Windows
</a>
</li>
@@ -463,15 +475,22 @@
</li>
<li class="md-nav__item">
<a href="#developing-the-extension" class="md-nav__link">
Developing the extension
<a href="#build-the-extension" class="md-nav__link">
Build the Extension
</a>
</li>
<li class="md-nav__item">
<a href="#develop-the-extension" class="md-nav__link">
Develop the Extension
</a>
</li>
<li class="md-nav__item">
<a href="#next-steps" class="md-nav__link">
Next steps
Next Steps
</a>
</li>
@@ -538,18 +557,6 @@
<li class="md-nav__item">
<a href="../../capabilities/" class="md-nav__link">
Overview
</a>
</li>
<li class="md-nav__item">
<a href="../../capabilities/common-capabilities/" class="md-nav__link">
Common Capabilities
@@ -576,7 +583,7 @@
<li class="md-nav__item">
<a href="../../capabilities/color-reference/" class="md-nav__link">
Color reference
Color Reference
</a>
</li>
@@ -681,18 +688,6 @@
</li>
<li class="md-nav__item">
<a href="../../testing-and-publishing/bundling/" class="md-nav__link">
Bundling Extensions
</a>
</li>
</ul>
</nav>
</li>
@@ -842,23 +837,23 @@
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="#installing-and-building-the-extension" class="md-nav__link">
Installing and Building the extension
<a href="#install-the-extension" class="md-nav__link">
Install the Extension
</a>
<nav class="md-nav" aria-label="Installing and Building the extension">
<nav class="md-nav" aria-label="Install the Extension">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#setup-the-extension-directory" class="md-nav__link">
Setup the extension directory
<a href="#linux-macos" class="md-nav__link">
Linux &amp; macOS
</a>
</li>
<li class="md-nav__item">
<a href="#build-the-extension" class="md-nav__link">
Build the extension
<a href="#windows" class="md-nav__link">
Windows
</a>
</li>
@@ -869,15 +864,22 @@
</li>
<li class="md-nav__item">
<a href="#developing-the-extension" class="md-nav__link">
Developing the extension
<a href="#build-the-extension" class="md-nav__link">
Build the Extension
</a>
</li>
<li class="md-nav__item">
<a href="#develop-the-extension" class="md-nav__link">
Develop the Extension
</a>
</li>
<li class="md-nav__item">
<a href="#next-steps" class="md-nav__link">
Next steps
Next Steps
</a>
</li>
@@ -897,57 +899,57 @@
<h1 id="your-first-extension">Your First Extension<a class="headerlink" href="#your-first-extension" title="Permanent link">#</a></h1>
<p>In this topic, we'll teach you the fundamental concepts for building extensions.</p>
<h2 id="installing-and-building-the-extension">Installing and Building the extension<a class="headerlink" href="#installing-and-building-the-extension" title="Permanent link">#</a></h2>
<p>Simple Lens extension that adds "Hello World" page to a cluster menu.</p>
<h3 id="setup-the-extension-directory">Setup the extension directory<a class="headerlink" href="#setup-the-extension-directory" title="Permanent link">#</a></h3>
<p>First you will need to clone the <a href="https://github.com/lensapp/lens-extension-samples">Lens Extension samples</a> repository to your local machine:</p>
<p>In this topic, you'll learn the basics of building extensions by creating an extension that adds a "Hello World" page to a cluster menu.</p>
<h2 id="install-the-extension">Install the Extension<a class="headerlink" href="#install-the-extension" title="Permanent link">#</a></h2>
<p>To install the extension, clone the <a href="https://github.com/lensapp/lens-extension-samples">Lens Extension samples</a> repository to your local machine:</p>
<div class="highlight"><pre><span></span><code>git clone https://github.com/lensapp/lens-extension-samples.git
</code></pre></div>
<p>Next you need to create a symlink from the directory that Lens will monitor for user installed extensions to the sample extension, in this case <strong>helloworld-sample</strong>:</p>
<p><strong>Linux &amp; MacOS</strong>
<p>Next you need to create a symlink. A symlink connects the directory that Lens will monitor for user-installed extensions to the sample extension. In this case the sample extension is <code>helloworld-sample</code>.</p>
<h3 id="linux-macos">Linux &amp; macOS<a class="headerlink" href="#linux-macos" title="Permanent link">#</a></h3>
<div class="highlight"><pre><span></span><code>mkdir -p ~/.k8slens/extensions
<span class="nb">cd</span> ~/.k8slens/extensions
ln -s lens-extension-samples/helloworld-sample helloworld-sample
</code></pre></div></p>
<p><strong>Windows</strong></p>
<p>Create the directory that Lens will monitor for user installed extensions:</p>
</code></pre></div>
<h3 id="windows">Windows<a class="headerlink" href="#windows" title="Permanent link">#</a></h3>
<p>Create the directory that Lens will monitor for user-installed extensions:</p>
<div class="highlight"><pre><span></span><code>mkdir C:<span class="se">\U</span>sers<span class="se">\&lt;</span>user&gt;<span class="se">\.</span>k8slens<span class="se">\e</span>xtensions -force
<span class="nb">cd</span> C:<span class="se">\U</span>sers<span class="se">\&lt;</span>user&gt;<span class="se">\.</span>k8slens<span class="se">\e</span>xtensions
</code></pre></div>
<p>If you have administrator rights, you can create symlink to the sample extension, in this case <strong>helloworld-sample</strong>:</p>
<p>If you have administrator rights, you can create symlink to the sample extension – in this case <code>helloworld-sample</code>:</p>
<div class="highlight"><pre><span></span><code>cmd /c mklink /D helloworld-sample lens-extension-samples<span class="se">\h</span>elloworld-sample
</code></pre></div>
<p>Without administrator rights, you need to copy the extensions sample directory into <code>C:\Users\&lt;user&gt;\.k8slens\extensions</code>:</p>
<div class="highlight"><pre><span></span><code>Copy-Item &#39;lens-extension-samples\helloworld-sample&#39; &#39;C:\Users\&lt;user&gt;\.k8slens\extensions\helloworld-sample&#39;
</code></pre></div>
<h3 id="build-the-extension">Build the extension<a class="headerlink" href="#build-the-extension" title="Permanent link">#</a></h3>
<h2 id="build-the-extension">Build the Extension<a class="headerlink" href="#build-the-extension" title="Permanent link">#</a></h2>
<p>To build the extension you can use <code>make</code> or run the <code>npm</code> commands manually:</p>
<div class="highlight"><pre><span></span><code><span class="nb">cd</span> &lt;lens-extension-samples directory&gt;/helloworld-sample
make build
</code></pre></div>
<p>OR</p>
<p>To run the <code>npm</code> commands, enter:</p>
<div class="highlight"><pre><span></span><code><span class="nb">cd</span> &lt;lens-extension-samples directory&gt;/helloworld-sample
npm install
npm run build
</code></pre></div>
<p>If you want to watch for any source code changes and automatically rebuild the extension you can use:</p>
<p>Optionally, automatically rebuild the extension by watching for changes to the source code. To do so, enter:</p>
<div class="highlight"><pre><span></span><code><span class="nb">cd</span> &lt;lens-extension-samples directory&gt;/helloworld-sample
npm run dev
</code></pre></div>
<p>Finally, if you already have Lens open you will need to quit and restart Lens for the extension to be loaded. After this initial restart you can reload Lens and it will pick up any new builds of the extension. Within Lens connect to an existing cluster or <a href="../../../clusters/adding-clusters/">create a new one</a>. You should see then see the "Hello World" page in the Lens sidebar cluster menu.</p>
<h2 id="developing-the-extension">Developing the extension<a class="headerlink" href="#developing-the-extension" title="Permanent link">#</a></h2>
<p>Let's make a change to the message that our helloworld-sample extension displays:</p>
<ul>
<p>You must restart Lens for the extension to load. After this initial restart, reload Lens and it will automatically pick up changes any time the extension rebuilds. </p>
<p>With Lens running, either connect to an existing cluster or <a href="../../../clusters/adding-clusters/">create a new one</a>. You will see the "Hello World" page in the left-side cluster menu.</p>
<h2 id="develop-the-extension">Develop the Extension<a class="headerlink" href="#develop-the-extension" title="Permanent link">#</a></h2>
<p>Finally, you'll make a change to the message that our Hello World sample extension displays:</p>
<ol>
<li>Navigate to <code>&lt;lens-extension-samples directory&gt;/helloworld-sample</code>.</li>
<li>Change the message from HelloWorld! to <strong>Hello Lens Extensions</strong> in <code>page.tsx</code>.</li>
<li>Rebuild the extension or, if you used <code>npm run dev</code>, the extension should automatically rebuild.</li>
<li>Reload the Lens window and click on the Hello World page.</li>
<li>You should see the updated message showing up.</li>
</ul>
<h2 id="next-steps">Next steps<a class="headerlink" href="#next-steps" title="Permanent link">#</a></h2>
<p>In the next topic, <a href="../anatomy/">Extension Anatomy</a>, we'll take a closer look at the source code of the Hello World sample and explain key concepts.</p>
<p>You can find the source code of this tutorial at: <a href="https://github.com/lensapp/lens-extension-samples/tree/master/helloworld-sample">lensapp/lens-extension-samples</a>. The <a href="../guides/overview.md">Extension Guides</a> topic contains other samples, each illustrating a different Lens Extension API.</p>
<li>In <code>page.tsx</code>, change the message from <code>HelloWorld!</code> to <code>Hello Lens Extensions</code>.</li>
<li>Rebuild the extension. If you used <code>npm run dev</code>, the extension will rebuild automatically.</li>
<li>Reload the Lens window.</li>
<li>Click on the Hello World page.</li>
<li>The updated message will appear.</li>
</ol>
<h2 id="next-steps">Next Steps<a class="headerlink" href="#next-steps" title="Permanent link">#</a></h2>
<p>In the <a href="../anatomy/">next topic</a>, we'll take a closer look at the source code of our Hello World sample.</p>
<p>You can find the source code for this tutorial at: <a href="https://github.com/lensapp/lens-extension-samples/tree/master/helloworld-sample">lensapp/lens-extension-samples</a>. <a href="../../guides/">Extension Guides</a> contains additional samples.</p>
@@ -966,7 +968,7 @@ npm run dev
<div class="md-footer-nav">
<nav class="md-footer-nav__inner md-grid" aria-label="Footer">
<a href="../../" class="md-footer-nav__link md-footer-nav__link--prev" rel="prev">
<a href="../overview/" class="md-footer-nav__link md-footer-nav__link--prev" rel="prev">
<div class="md-footer-nav__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
</div>