mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Deployed b5cef91 to latest with MkDocs 1.1.2 and mike 0.5.3
This commit is contained in:
GitHub Action committed
1 parent
06047464b5
commit
76629955f9
3 files changed
+196
-4
No files matched your search
@@ -74,6 +74,11 @@
|
||||
<label class="md-overlay" for="__drawer"></label>
|
||||
<div data-md-component="skip">
|
||||
|
||||
|
||||
<a href="#extension-anatomy" class="md-skip">
|
||||
Skip to content
|
||||
</a>
|
||||
|
||||
</div>
|
||||
<div data-md-component="announce">
|
||||
|
||||
@@ -417,11 +422,62 @@
|
||||
|
||||
<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">
|
||||
Extension Anatomy
|
||||
<span class="md-nav__icon md-icon"></span>
|
||||
</label>
|
||||
|
||||
<a href="./" class="md-nav__link md-nav__link--active">
|
||||
Extension Anatomy
|
||||
</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="#extension-file-structure" class="md-nav__link">
|
||||
Extension File Structure
|
||||
</a>
|
||||
|
||||
<nav class="md-nav" aria-label="Extension File Structure">
|
||||
<ul class="md-nav__list">
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#extension-manifest" class="md-nav__link">
|
||||
Extension Manifest
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#extension-entry-files" class="md-nav__link">
|
||||
Extension Entry Files
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
@@ -664,15 +720,151 @@
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="md-sidebar md-sidebar--secondary" data-md-component="toc">
|
||||
<div class="md-sidebar__scrollwrap">
|
||||
<div class="md-sidebar__inner">
|
||||
|
||||
<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="#extension-file-structure" class="md-nav__link">
|
||||
Extension File Structure
|
||||
</a>
|
||||
|
||||
<nav class="md-nav" aria-label="Extension File Structure">
|
||||
<ul class="md-nav__list">
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#extension-manifest" class="md-nav__link">
|
||||
Extension Manifest
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#extension-entry-files" class="md-nav__link">
|
||||
Extension Entry Files
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="md-content">
|
||||
<article class="md-content__inner md-typeset">
|
||||
|
||||
|
||||
|
||||
<h1>Extension Anatomy</h1>
|
||||
|
||||
|
||||
<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>
|
||||
<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>
|
||||
</ul>
|
||||
<p>Let's take a closer look at Hello World sample's source code and see how to achieve these things.</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
|
||||
├── Makefile // Config for build tasks that compiles the extension
|
||||
├── README.md // Readable description of your extension's functionality
|
||||
├── src
|
||||
│ └── page.tsx // Extension's additional source code
|
||||
├── main.ts // Source code for extension's main entrypoint
|
||||
├── package.json // Extension manifest and dependencies
|
||||
├── renderer.tsx // Source code for extension's renderer entrypoint
|
||||
├── 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>
|
||||
<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>
|
||||
<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 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>
|
||||
</ul>
|
||||
<div class="highlight"><pre><span></span><code><span class="p">{</span>
|
||||
<span class="s2">"name"</span><span class="o">:</span> <span class="s2">"helloworld-sample"</span><span class="p">,</span>
|
||||
<span class="s2">"publisher"</span><span class="o">:</span> <span class="s2">"lens-samples"</span><span class="p">,</span>
|
||||
<span class="s2">"version"</span><span class="o">:</span> <span class="s2">"0.0.1"</span><span class="p">,</span>
|
||||
<span class="s2">"description"</span><span class="o">:</span> <span class="s2">"Lens helloworld-sample"</span><span class="p">,</span>
|
||||
<span class="s2">"license"</span><span class="o">:</span> <span class="s2">"MIT"</span><span class="p">,</span>
|
||||
<span class="s2">"homepage"</span><span class="o">:</span> <span class="s2">"https://github.com/lensapp/lens-extension-samples"</span><span class="p">,</span>
|
||||
<span class="s2">"engines"</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="s2">"lens"</span><span class="o">:</span> <span class="s2">"^4.0.0"</span>
|
||||
<span class="p">},</span>
|
||||
<span class="s2">"main"</span><span class="o">:</span> <span class="s2">"dist/main.js"</span><span class="p">,</span>
|
||||
<span class="s2">"renderer"</span><span class="o">:</span> <span class="s2">"dist/renderer.js"</span><span class="p">,</span>
|
||||
<span class="s2">"scripts"</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="s2">"build"</span><span class="o">:</span> <span class="s2">"webpack --config webpack.config.js"</span><span class="p">,</span>
|
||||
<span class="s2">"dev"</span><span class="o">:</span> <span class="s2">"npm run build --watch"</span>
|
||||
<span class="p">},</span>
|
||||
<span class="s2">"dependencies"</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="s2">"react-open-doodles"</span><span class="o">:</span> <span class="s2">"^1.0.5"</span>
|
||||
<span class="p">},</span>
|
||||
<span class="s2">"devDependencies"</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="s2">"@k8slens/extensions"</span><span class="o">:</span> <span class="s2">"^4.0.0-alpha.2"</span><span class="p">,</span>
|
||||
<span class="s2">"ts-loader"</span><span class="o">:</span> <span class="s2">"^8.0.4"</span><span class="p">,</span>
|
||||
<span class="s2">"typescript"</span><span class="o">:</span> <span class="s2">"^4.0.3"</span><span class="p">,</span>
|
||||
<span class="s2">"@types/react"</span><span class="o">:</span> <span class="s2">"^16.9.35"</span><span class="p">,</span>
|
||||
<span class="s2">"@types/node"</span><span class="o">:</span> <span class="s2">"^12.0.0"</span><span class="p">,</span>
|
||||
<span class="s2">"webpack"</span><span class="o">:</span> <span class="s2">"^4.44.2"</span><span class="p">,</span>
|
||||
<span class="s2">"webpack-cli"</span><span class="o">:</span> <span class="s2">"^3.3.11"</span>
|
||||
<span class="p">}</span>
|
||||
<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>
|
||||
<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">"@k8slens/extensions"</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">"./page"</span>
|
||||
<span class="kr">import</span> <span class="nx">React</span> <span class="nx">from</span> <span class="s2">"react"</span>
|
||||
|
||||
<span class="kr">export</span> <span class="k">default</span> <span class="kr">class</span> <span class="nx">ExampleExtension</span> <span class="kr">extends</span> <span class="nx">LensRendererExtension</span> <span class="p">{</span>
|
||||
<span class="nx">clusterPages</span> <span class="o">=</span> <span class="p">[</span>
|
||||
<span class="p">{</span>
|
||||
<span class="nx">path</span><span class="o">:</span> <span class="s2">"/extension-example"</span><span class="p">,</span>
|
||||
<span class="nx">title</span><span class="o">:</span> <span class="s2">"Hello World"</span><span class="p">,</span>
|
||||
<span class="nx">components</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">Page</span><span class="o">:</span> <span class="p">()</span> <span class="o">=></span> <span class="o"><</span><span class="nx">ExamplePage</span> <span class="nx">extension</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">}</span><span class="o">/></span><span class="p">,</span>
|
||||
<span class="nx">MenuIcon</span>: <span class="kt">ExampleIcon</span><span class="p">,</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"config":{"lang":["en"],"min_search_length":3,"prebuild_index":false,"separator":"[\\s\\-]+"},"docs":[{"location":"","text":"Overview # Lens is the most powerful Kubernetes IDE on the market. It is a standalone application, and it is available on macOS, Windows, and Linux. Some of the benefits of using Lens include: Confidence that your clusters are properly setup and configured. Increased visibility, real time statistics, log streams, and hands-on troubleshooting capabilities. The ability to work with your clusters quickly and easily, radically improving productivity and the speed of business. Watch this introductory video to see Lens in action: Note: Use CTRL+click (on Windows and Linux) or CMD+click (on MacOS) to open the above in a new tab Downloading Lens # Download Lens for macOS, Windows, or Linux. Quick Start # Get up and running quickly by learning to add clusters .","title":"Overview"},{"location":"#overview","text":"Lens is the most powerful Kubernetes IDE on the market. It is a standalone application, and it is available on macOS, Windows, and Linux. Some of the benefits of using Lens include: Confidence that your clusters are properly setup and configured. Increased visibility, real time statistics, log streams, and hands-on troubleshooting capabilities. The ability to work with your clusters quickly and easily, radically improving productivity and the speed of business. Watch this introductory video to see Lens in action: Note: Use CTRL+click (on Windows and Linux) or CMD+click (on MacOS) to open the above in a new tab","title":"Overview"},{"location":"#downloading-lens","text":"Download Lens for macOS, Windows, or Linux.","title":"Downloading Lens"},{"location":"#quick-start","text":"Get up and running quickly by learning to add clusters .","title":"Quick Start"},{"location":"clusters/adding-clusters/","text":"Adding clusters # Add clusters by clicking the Add Cluster button in the left-side menu. Click the Add Cluster button (indicated with a '+' icon). Enter the path to your kubeconfig file. You'll need to have a kubeconfig file for the cluster you want to add. You can either browse for the path from the file system or or enter it directly. Selected cluster contexts are added as a separate item in the left-side cluster menu to allow you to operate easily on multiple clusters and/or contexts. NOTE : Any cluster that you added manually will not be merged into your kubeconfig file. For more information on kubeconfig see Kubernetes docs . To see your currently-enabled config with kubectl , enter kubectl config view --minify --raw in your terminal.","title":"Adding clusters"},{"location":"clusters/adding-clusters/#adding-clusters","text":"Add clusters by clicking the Add Cluster button in the left-side menu. Click the Add Cluster button (indicated with a '+' icon). Enter the path to your kubeconfig file. You'll need to have a kubeconfig file for the cluster you want to add. You can either browse for the path from the file system or or enter it directly. Selected cluster contexts are added as a separate item in the left-side cluster menu to allow you to operate easily on multiple clusters and/or contexts. NOTE : Any cluster that you added manually will not be merged into your kubeconfig file. For more information on kubeconfig see Kubernetes docs . To see your currently-enabled config with kubectl , enter kubectl config view --minify --raw in your terminal.","title":"Adding clusters"},{"location":"clusters/removing-clusters/","text":"Removing clusters # Remove Lens clusters using the context menu that appears when you right-click the cluster in the left-side menu that you want to remove. To remove a cluster from your cluster list: Right-click the name of the cluster in the left-side menu that you want to remove. Click Remove . NOTE : This will only remove the cluster from your Lens cluster list. It will not affect your actual Kubernetes cluster or its configuration.","title":"Removing cluster"},{"location":"clusters/removing-clusters/#removing-clusters","text":"Remove Lens clusters using the context menu that appears when you right-click the cluster in the left-side menu that you want to remove. To remove a cluster from your cluster list: Right-click the name of the cluster in the left-side menu that you want to remove. Click Remove . NOTE : This will only remove the cluster from your Lens cluster list. It will not affect your actual Kubernetes cluster or its configuration.","title":"Removing clusters"},{"location":"clusters/settings/","text":"Settings # It is easy to configure Lens Clusters to your liking through its various settings. Right-click the name of the cluster in the left-side menu that you want to open the settings for. Click Settings . Status # Overview of the cluster status Cluster Status # Cluster status information including the detected distribution, kernel version, API endpoint, and online status General # General cluster settings Cluster Name # The cluster name is inheritatedLine truncated
|
||||
{"config":{"lang":["en"],"min_search_length":3,"prebuild_index":false,"separator":"[\\s\\-]+"},"docs":[{"location":"","text":"Overview # Lens is the most powerful Kubernetes IDE on the market. It is a standalone application, and it is available on macOS, Windows, and Linux. Some of the benefits of using Lens include: Confidence that your clusters are properly setup and configured. Increased visibility, real time statistics, log streams, and hands-on troubleshooting capabilities. The ability to work with your clusters quickly and easily, radically improving productivity and the speed of business. Watch this introductory video to see Lens in action: Note: Use CTRL+click (on Windows and Linux) or CMD+click (on MacOS) to open the above in a new tab Downloading Lens # Download Lens for macOS, Windows, or Linux. Quick Start # Get up and running quickly by learning to add clusters .","title":"Overview"},{"location":"#overview","text":"Lens is the most powerful Kubernetes IDE on the market. It is a standalone application, and it is available on macOS, Windows, and Linux. Some of the benefits of using Lens include: Confidence that your clusters are properly setup and configured. Increased visibility, real time statistics, log streams, and hands-on troubleshooting capabilities. The ability to work with your clusters quickly and easily, radically improving productivity and the speed of business. Watch this introductory video to see Lens in action: Note: Use CTRL+click (on Windows and Linux) or CMD+click (on MacOS) to open the above in a new tab","title":"Overview"},{"location":"#downloading-lens","text":"Download Lens for macOS, Windows, or Linux.","title":"Downloading Lens"},{"location":"#quick-start","text":"Get up and running quickly by learning to add clusters .","title":"Quick Start"},{"location":"clusters/adding-clusters/","text":"Adding clusters # Add clusters by clicking the Add Cluster button in the left-side menu. Click the Add Cluster button (indicated with a '+' icon). Enter the path to your kubeconfig file. You'll need to have a kubeconfig file for the cluster you want to add. You can either browse for the path from the file system or or enter it directly. Selected cluster contexts are added as a separate item in the left-side cluster menu to allow you to operate easily on multiple clusters and/or contexts. NOTE : Any cluster that you added manually will not be merged into your kubeconfig file. For more information on kubeconfig see Kubernetes docs . To see your currently-enabled config with kubectl , enter kubectl config view --minify --raw in your terminal.","title":"Adding clusters"},{"location":"clusters/adding-clusters/#adding-clusters","text":"Add clusters by clicking the Add Cluster button in the left-side menu. Click the Add Cluster button (indicated with a '+' icon). Enter the path to your kubeconfig file. You'll need to have a kubeconfig file for the cluster you want to add. You can either browse for the path from the file system or or enter it directly. Selected cluster contexts are added as a separate item in the left-side cluster menu to allow you to operate easily on multiple clusters and/or contexts. NOTE : Any cluster that you added manually will not be merged into your kubeconfig file. For more information on kubeconfig see Kubernetes docs . To see your currently-enabled config with kubectl , enter kubectl config view --minify --raw in your terminal.","title":"Adding clusters"},{"location":"clusters/removing-clusters/","text":"Removing clusters # Remove Lens clusters using the context menu that appears when you right-click the cluster in the left-side menu that you want to remove. To remove a cluster from your cluster list: Right-click the name of the cluster in the left-side menu that you want to remove. Click Remove . NOTE : This will only remove the cluster from your Lens cluster list. It will not affect your actual Kubernetes cluster or its configuration.","title":"Removing cluster"},{"location":"clusters/removing-clusters/#removing-clusters","text":"Remove Lens clusters using the context menu that appears when you right-click the cluster in the left-side menu that you want to remove. To remove a cluster from your cluster list: Right-click the name of the cluster in the left-side menu that you want to remove. Click Remove . NOTE : This will only remove the cluster from your Lens cluster list. It will not affect your actual Kubernetes cluster or its configuration.","title":"Removing clusters"},{"location":"clusters/settings/","text":"Settings # It is easy to configure Lens Clusters to your liking through its various settings. Right-click the name of the cluster in the left-side menu that you want to open the settings for. Click Settings . Status # Overview of the cluster status Cluster Status # Cluster status information including the detected distribution, kernel version, API endpoint, and online status General # General cluster settings Cluster Name # The cluster name is inheritatedLine truncated
|
||||
Binary file not shown.
Reference in new issue
Block a user