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
gh-pages
lens/master/extensions/get-started/anatomy/index.html

1100 lines
44 KiB
HTML
Raw Permalink Blame History

<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="Documentation for Lens Extension Development and API.">
<meta name="author" content="Mirantis, Inc.">
<link rel="canonical" href="https://api-docs.k8slens.dev/master/extensions/get-started/anatomy/">
<link rel="prev" href="../your-first-extension/">
<link rel="next" href="../wrapping-up/">
<link rel="icon" href="../../../img/favicon.ico">
<meta name="generator" content="mkdocs-1.5.2, mkdocs-material-9.1.21">
<title>Extension Anatomy - Lens Extension Development</title>
<link rel="stylesheet" href="../../../assets/stylesheets/main.eebd395e.min.css">
<link rel="stylesheet" href="../../../assets/stylesheets/palette.ecc896b0.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
<style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
<link rel="stylesheet" href="../../../stylesheets/extra.css">
<script>__md_scope=new URL("../../..",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
<script id="__analytics">function __md_analytics(){window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","UA-159377374-2","auto"),ga("set","anonymizeIp",!0),ga("send","pageview"),document.addEventListener("DOMContentLoaded",function(){document.forms.search&&document.forms.search.query.addEventListener("blur",function(){var e;this.value&&(e=document.location.pathname,ga("send","pageview",e+"?q="+this.value))}),document$.subscribe(function(){var a=document.forms.feedback;if(void 0!==a)for(var e of a.querySelectorAll("[type=submit]"))e.addEventListener("click",function(e){e.preventDefault();var t=document.location.pathname,e=this.getAttribute("data-md-value");ga("send","event","feedback","click",t,e),a.firstElementChild.disabled=!0;e=a.querySelector(".md-feedback__note [data-md-value='"+e+"']");e&&(e.hidden=!1)}),a.hidden=!1}),location$.subscribe(function(e){ga("send","pageview",e.pathname)})});var e=document.createElement("script");e.async=!0,e.src="https://www.google-analytics.com/analytics.js",document.getElementById("__analytics").insertAdjacentElement("afterEnd",e)}</script>
<script>"undefined"!=typeof __md_analytics&&__md_analytics()</script>
</head>
<body dir="ltr" data-md-color-scheme="slate" data-md-color-primary="indigo" data-md-color-accent="indigo">
<script>var palette=__md_get("__palette");if(palette&&"object"==typeof palette.color)for(var key of Object.keys(palette.color))document.body.setAttribute("data-md-color-"+key,palette.color[key])</script>
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<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">
</div>
<div data-md-color-scheme="default" data-md-component="outdated" hidden>
</div>
<header class="md-header md-header--shadow" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="Header">
<a href="../../.." title="Lens Extension Development" class="md-header__button md-logo" aria-label="Lens Extension Development" data-md-component="logo">
<img src="../../../img/lens-logo-icon.svg" alt="logo">
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg>
</label>
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
Lens Extension Development
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
Extension Anatomy
</span>
</div>
</div>
</div>
<form class="md-header__option" data-md-component="palette">
<input class="md-option" data-md-color-media="" data-md-color-scheme="slate" data-md-color-primary="indigo" data-md-color-accent="indigo" aria-label="Switch to dark mode" type="radio" name="__palette" id="__palette_1">
<label class="md-header__button md-icon" title="Switch to dark mode" for="__palette_2" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 6H7c-3.31 0-6 2.69-6 6s2.69 6 6 6h10c3.31 0 6-2.69 6-6s-2.69-6-6-6zm0 10H7c-2.21 0-4-1.79-4-4s1.79-4 4-4h10c2.21 0 4 1.79 4 4s-1.79 4-4 4zM7 9c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>
</label>
<input class="md-option" data-md-color-media="" data-md-color-scheme="default" data-md-color-primary="indigo" data-md-color-accent="indigo" aria-label="Switch to light mode" type="radio" name="__palette" id="__palette_2">
<label class="md-header__button md-icon" title="Switch to light mode" for="__palette_1" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 7H7a5 5 0 0 0-5 5 5 5 0 0 0 5 5h10a5 5 0 0 0 5-5 5 5 0 0 0-5-5m0 8a3 3 0 0 1-3-3 3 3 0 0 1 3-3 3 3 0 0 1 3 3 3 3 0 0 1-3 3Z"/></svg>
</label>
</form>
<label class="md-header__button md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
</label>
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
<label class="md-search__icon md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
<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>
</label>
<nav class="md-search__options" aria-label="Search">
<button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"/></svg>
</button>
</nav>
<div class="md-search__suggest" data-md-component="search-suggest"></div>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" data-md-scrollfix>
<div class="md-search-result" data-md-component="search-result">
<div class="md-search-result__meta">
Initializing search
</div>
<ol class="md-search-result__list" role="presentation"></ol>
</div>
</div>
</div>
</div>
</div>
<div class="md-header__source">
<a href="https://github.com/lensapp/lens" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
</div>
<div class="md-source__repository">
GitHub
</div>
</a>
</div>
</nav>
</header>
<div class="md-container" data-md-component="container">
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href="../../.." title="Lens Extension Development" class="md-nav__button md-logo" aria-label="Lens Extension Development" data-md-component="logo">
<img src="../../../img/lens-logo-icon.svg" alt="logo">
</a>
Lens Extension Development
</label>
<div class="md-nav__source">
<a href="https://github.com/lensapp/lens" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
</div>
<div class="md-source__repository">
GitHub
</div>
</a>
</div>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../.." class="md-nav__link">
Overview
</a>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" checked>
<label class="md-nav__link" for="__nav_2" id="__nav_2_label" tabindex="0">
Getting Started
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_2">
<span class="md-nav__icon md-icon"></span>
Getting Started
</label>
<ul class="md-nav__list" data-md-scrollfix>
<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
</a>
</li>
<li class="md-nav__item md-nav__item--active">
<input class="md-nav__toggle md-toggle" 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-component="toc" 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="#webpack-configuration" class="md-nav__link">
Webpack configuration
</a>
</li>
<li class="md-nav__item">
<a href="#extension-entry-files" class="md-nav__link">
Extension Entry Files
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../wrapping-up/" class="md-nav__link">
Wrapping Up
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3" >
<label class="md-nav__link" for="__nav_3" id="__nav_3_label" tabindex="0">
Extension Capabilities
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3">
<span class="md-nav__icon md-icon"></span>
Extension Capabilities
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../capabilities/common-capabilities/" class="md-nav__link">
Common Capabilities
</a>
</li>
<li class="md-nav__item">
<a href="../../capabilities/styling/" class="md-nav__link">
Styling
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4" >
<label class="md-nav__link" for="__nav_4" id="__nav_4_label" tabindex="0">
Extension Guides
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_4_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4">
<span class="md-nav__icon md-icon"></span>
Extension Guides
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../guides/" class="md-nav__link">
Overview
</a>
</li>
<li class="md-nav__item">
<a href="../../guides/generator/" class="md-nav__link">
Generator
</a>
</li>
<li class="md-nav__item">
<a href="../../guides/main-extension/" class="md-nav__link">
Main Extension
</a>
</li>
<li class="md-nav__item">
<a href="../../guides/renderer-extension/" class="md-nav__link">
Renderer Extension
</a>
</li>
<li class="md-nav__item">
<a href="../../guides/catalog/" class="md-nav__link">
Catalog
</a>
</li>
<li class="md-nav__item">
<a href="../../guides/resource-stack/" class="md-nav__link">
Resource Stack
</a>
</li>
<li class="md-nav__item">
<a href="../../guides/extending-kubernetes-cluster/" class="md-nav__link">
Extending KubernetesCluster
</a>
</li>
<li class="md-nav__item">
<a href="../../guides/stores/" class="md-nav__link">
Stores
</a>
</li>
<li class="md-nav__item">
<a href="../../guides/working-with-mobx/" class="md-nav__link">
Working with MobX
</a>
</li>
<li class="md-nav__item">
<a href="../../guides/protocol-handlers/" class="md-nav__link">
Protocol Handlers
</a>
</li>
<li class="md-nav__item">
<a href="../../guides/ipc/" class="md-nav__link">
IPC
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5" >
<label class="md-nav__link" for="__nav_5" id="__nav_5_label" tabindex="0">
Testing and Publishing
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_5_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5">
<span class="md-nav__icon md-icon"></span>
Testing and Publishing
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../testing-and-publishing/testing/" class="md-nav__link">
Testing Extensions
</a>
</li>
<li class="md-nav__item">
<a href="../../testing-and-publishing/publishing/" class="md-nav__link">
Publishing Extensions
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../../api/" class="md-nav__link">
API Reference
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="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-component="toc" 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="#webpack-configuration" class="md-nav__link">
Webpack configuration
</a>
</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" data-md-component="content">
<article class="md-content__inner md-typeset">
<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>The Hello World sample extension does three things:</p>
<ul>
<li>Implements <code>onActivate()</code> and outputs a message to the console.</li>
<li>Implements <code>onDeactivate()</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 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
├── Makefile // Config for build tasks that compiles the extension
├── README.md // Readable description of your extension&#39;s functionality
├── src
│ └── page.tsx // Extension&#39;s additional source code
├── main.ts // Source code for extension&#39;s main entrypoint
├── package.json // Extension manifest and dependencies
├── renderer.tsx // Source code for extension&#39;s renderer entrypoint
├── 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>
<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>
<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 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.
We only support the <code>^</code> range, which is also optional to specify, and only major and minor version numbers.
Meaning that <code>^5.4</code> and <code>5.4</code> both mean the same thing, and the patch version in <code>5.4.2</code> is ignored.</li>
</ul>
<div class="highlight"><pre><span></span><code><span class="p">{</span>
<span class="w"> </span><span class="s2">&quot;name&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;helloworld-sample&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="s2">&quot;publisher&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;lens-samples&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="s2">&quot;version&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;0.0.1&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="s2">&quot;description&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;Lens helloworld-sample&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="s2">&quot;license&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;MIT&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="s2">&quot;homepage&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;https://github.com/lensapp/lens-extension-samples&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="s2">&quot;engines&quot;</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="s2">&quot;node&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;^16.14.2&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="s2">&quot;lens&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;5.4&quot;</span>
<span class="w"> </span><span class="p">},</span>
<span class="w"> </span><span class="s2">&quot;main&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;dist/main.js&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="s2">&quot;renderer&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;dist/renderer.js&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="s2">&quot;scripts&quot;</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="s2">&quot;build&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;webpack --config webpack.config.js&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="s2">&quot;dev&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;npm run build --watch&quot;</span>
<span class="w"> </span><span class="p">},</span>
<span class="w"> </span><span class="s2">&quot;dependencies&quot;</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="s2">&quot;react-open-doodles&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;^1.0.5&quot;</span>
<span class="w"> </span><span class="p">},</span>
<span class="w"> </span><span class="s2">&quot;devDependencies&quot;</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="s2">&quot;@k8slens/extensions&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;^5.4.6&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="s2">&quot;ts-loader&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;^8.0.4&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="s2">&quot;typescript&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;^4.5.5&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="s2">&quot;@types/react&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;^17.0.44&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="s2">&quot;@types/node&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;^16.14.2&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="s2">&quot;webpack&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;^4.44.2&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="s2">&quot;webpack-cli&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;^3.3.11&quot;</span>
<span class="w"> </span><span class="p">}</span>
<span class="p">}</span>
</code></pre></div>
<h2 id="webpack-configuration">Webpack configuration<a class="headerlink" href="#webpack-configuration" title="Permanent link">#</a></h2>
<p>The following webpack <code>externals</code> are provided by <code>Lens</code> and must be used (when available) to make sure that the versions used are in sync.</p>
<table>
<thead>
<tr>
<th>Package</th>
<th>webpack external syntax</th>
<th>Lens versions</th>
<th>Available in Main</th>
<th>Available in Renderer</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>mobx</code></td>
<td><code>var global.Mobx</code></td>
<td><code>&gt;5.0.0</code></td>
<td>✅</td>
<td>✅</td>
</tr>
<tr>
<td><code>mobx-react</code></td>
<td><code>var global.MobxReact</code></td>
<td><code>&gt;5.0.0</code></td>
<td>❌</td>
<td>✅</td>
</tr>
<tr>
<td><code>react</code></td>
<td><code>var global.React</code></td>
<td><code>&gt;5.0.0</code></td>
<td>❌</td>
<td>✅</td>
</tr>
<tr>
<td><code>react-router</code></td>
<td><code>var global.ReactRouter</code></td>
<td><code>&gt;5.0.0</code></td>
<td>❌</td>
<td>✅</td>
</tr>
<tr>
<td><code>react-router-dom</code></td>
<td><code>var global.ReactRouterDom</code></td>
<td><code>&gt;5.0.0</code></td>
<td>❌</td>
<td>✅</td>
</tr>
<tr>
<td><code>react-dom</code></td>
<td><code>var global.ReactDOM</code></td>
<td><code>&gt;5.5.0</code></td>
<td>❌</td>
<td>✅</td>
</tr>
</tbody>
</table>
<p>What is exported is the whole of the packages as a <code>*</code> import (within typescript).</p>
<p>For example, the following is how you would specify these within your webpack configuration files.</p>
<div class="highlight"><pre><span></span><code><span class="p">{</span>
<span class="w"> </span><span class="err">...</span>
<span class="w"> </span><span class="nt">&quot;externals&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[</span>
<span class="w"> </span><span class="err">...</span>
<span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;mobx&quot;</span><span class="p">:</span><span class="w"> </span><span class="nt">&quot;var global.Mobx&quot;</span>
<span class="w"> </span><span class="nt">&quot;mobx-react&quot;</span><span class="p">:</span><span class="w"> </span><span class="nt">&quot;var global.MobxReact&quot;</span>
<span class="w"> </span><span class="nt">&quot;react&quot;</span><span class="p">:</span><span class="w"> </span><span class="nt">&quot;var global.React&quot;</span>
<span class="w"> </span><span class="nt">&quot;react-router&quot;</span><span class="p">:</span><span class="w"> </span><span class="nt">&quot;var global.ReactRouter&quot;</span>
<span class="w"> </span><span class="nt">&quot;react-router-dom&quot;</span><span class="p">:</span><span class="w"> </span><span class="nt">&quot;var global.ReactRouterDom&quot;</span>
<span class="w"> </span><span class="nt">&quot;react-dom&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;var global.ReactDOM&quot;</span>
<span class="w"> </span><span class="p">}</span>
<span class="w"> </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 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="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">&quot;@k8slens/extensions&quot;</span><span class="p">;</span>
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">ExampleIcon</span><span class="p">,</span><span class="w"> </span><span class="nx">ExamplePage</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">&quot;./page&quot;</span><span class="p">;</span>
<span class="k">import</span><span class="w"> </span><span class="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">&quot;react&quot;</span><span class="p">;</span>
<span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExampleExtension</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nx">clusterPages</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span>
<span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nx">id</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;extension-example&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nx">components</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nx">Page</span><span class="o">:</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="nx">ExamplePage</span><span class="w"> </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="w"> </span><span class="o">/&gt;</span><span class="p">,</span>
<span class="w"> </span><span class="p">},</span>
<span class="w"> </span><span class="p">},</span>
<span class="w"> </span><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>
</article>
</div>
</div>
</main>
<footer class="md-footer">
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-copyright">
<div class="md-copyright__highlight">
Copyright &copy; 2021 <a href="https://mirantis.com/">Mirantis Inc.</a> - All rights reserved.
</div>
</div>
<div class="md-social">
<a href="https://github.com/lensapp/lens" target="_blank" rel="noopener" title="Lens on GitHub" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
</a>
<a href="https://twitter.com/k8slens" target="_blank" rel="noopener" title="Lens on Twitter" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
</a>
<a href="https://forums.k8slens.dev/" target="_blank" rel="noopener" title="Lens Forums" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M225.9 32C103.3 32 0 130.5 0 252.1 0 256 .1 480 .1 480l225.8-.2c122.7 0 222.1-102.3 222.1-223.9C448 134.3 348.6 32 225.9 32zM224 384c-19.4 0-37.9-4.3-54.4-12.1L88.5 392l22.9-75c-9.8-18.1-15.4-38.9-15.4-61 0-70.7 57.3-128 128-128s128 57.3 128 128-57.3 128-128 128z"/></svg>
</a>
<a href="https://k8slens.dev/" target="_blank" rel="noopener" title="Lens Website" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6 31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0l112.3-112.3zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5 50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5l112.2-112.3c31.5-31.5 82.5-31.5 114 0 27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"/></svg>
</a>
</div>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<script id="__config" type="application/json">{"base": "../../..", "features": ["toc.autohide", "search.suggest", "search.highlight", "content.code.copy"], "search": "../../../assets/javascripts/workers/search.74e28a9f.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": {"provider": "mike"}}</script>
<script src="../../../assets/javascripts/bundle.220ee61c.min.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink