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/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>