mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Deployed e560baa2d to master with MkDocs 1.1.2 and mike 1.0.0
This commit is contained in:
1 parent
9d9348a4ff
commit
8dd3c37633
266 files changed
+7875
-4052
No files matched your search
@@ -665,6 +665,18 @@
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../../guides/protocol-handlers/" class="md-nav__link">
|
||||
Protocol Handlers
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
</li>
|
||||
@@ -917,7 +929,8 @@
|
||||
|
||||
|
||||
<h1 id="extension-anatomy">Extension Anatomy<a class="headerlink" href="#extension-anatomy" title="Permanent link">#</a></h1>
|
||||
<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>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>Implements <code>onActivate()</code> and outputs a message to the console.</li>
|
||||
@@ -938,11 +951,17 @@
|
||||
├── tsconfig.json // TypeScript configuration
|
||||
├── webpack.config.js // Webpack configuration
|
||||
</code></pre></div>
|
||||
<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>
|
||||
<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 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>
|
||||
<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>@<publisher>/<name></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>name</code> and <code>publisher</code>: Lens uses <code>@<publisher>/<name></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>
|
||||
@@ -978,9 +997,20 @@
|
||||
<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 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>
|
||||
<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="k">import</span> <span class="p">{</span> <span class="nx">LensRendererExtension</span> <span class="p">}</span> <span class="nx">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="nx">from</span> <span class="s2">"./page"</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="nx">from</span> <span class="s2">"react"</span>
|
||||
@@ -996,7 +1026,8 @@
|
||||
<span class="p">]</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -652,6 +652,18 @@
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../../guides/protocol-handlers/" class="md-nav__link">
|
||||
Protocol Handlers
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
</li>
|
||||
@@ -891,18 +903,26 @@
|
||||
|
||||
|
||||
<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 other things that might be of help.</p>
|
||||
<p>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.</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>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>
|
||||
<li>We use <a href="https://www.webpack.js.org/">Webpack</a> for compilation.
|
||||
All extension need to be at least compatible with a webpack system.</li>
|
||||
</ul>
|
||||
<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>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 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.</p>
|
||||
<p>See <a href="../your-first-extension/">Your First Extension</a> to get started.</p>
|
||||
|
||||
|
||||
|
||||
@@ -659,6 +659,18 @@
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../../guides/protocol-handlers/" class="md-nav__link">
|
||||
Protocol Handlers
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
</li>
|
||||
@@ -905,11 +917,17 @@
|
||||
|
||||
|
||||
<h1 id="wrapping-up">Wrapping Up<a class="headerlink" href="#wrapping-up" title="Permanent link">#</a></h1>
|
||||
<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>
|
||||
<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, 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>
|
||||
<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>
|
||||
<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>In this section, you can learn:</p>
|
||||
<ul>
|
||||
|
||||
@@ -693,6 +693,18 @@
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../../guides/protocol-handlers/" class="md-nav__link">
|
||||
Protocol Handlers
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
</li>
|
||||
@@ -973,7 +985,8 @@
|
||||
|
||||
|
||||
<h1 id="your-first-extension">Your First Extension<a class="headerlink" href="#your-first-extension" title="Permanent link">#</a></h1>
|
||||
<p>We recommend to always use <a href="https://github.com/lensapp/generator-lens-ext">Yeoman generator for Lens Extension</a> to start new extension project. <a href="../../guides/generator/">Read the generator guide here</a>.</p>
|
||||
<p>We recommend to always use <a href="https://github.com/lensapp/generator-lens-ext">Yeoman generator for Lens Extension</a> to start new extension project.
|
||||
<a href="../../guides/generator/">Read the generator guide here</a>.</p>
|
||||
<p>If you want to setup the project manually, please continue reading.</p>
|
||||
<h2 id="first-extension">First Extension<a class="headerlink" href="#first-extension" title="Permanent link">#</a></h2>
|
||||
<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>
|
||||
@@ -981,7 +994,9 @@
|
||||
<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. 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>
|
||||
<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 & 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
|
||||
@@ -1008,12 +1023,15 @@ make build
|
||||
npm install
|
||||
npm run build
|
||||
</code></pre></div>
|
||||
<p>Optionally, automatically rebuild the extension by watching for changes to the source code. To do so, enter:</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> <lens-extension-samples directory>/helloworld-sample
|
||||
npm run dev
|
||||
</code></pre></div>
|
||||
<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>
|
||||
<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>
|
||||
@@ -1026,7 +1044,8 @@ npm run dev
|
||||
</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>
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in new issue
Block a user