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
64832323cb
lens/latest/extensions/get-started/anatomy/index.html

1066 lines
40 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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 IDE. The only system you’ll ever need to take control of your Kubernetes clusters. It's open source and free. Download it today!">
<link rel="canonical" href="https://docs.k8slens.dev/extensions/get-started/anatomy/">
<meta name="author" content="Mirantis, Inc.">
<link rel="shortcut icon" href="../../../img/favicon.ico">
<meta name="generator" content="mkdocs-1.1.2, mkdocs-material-6.1.0+insiders-1.7.0">
<title>Extension Anatomy - Lens Documentation</title>
<link rel="stylesheet" href="../../../assets/stylesheets/main.406af9ae.min.css">
<link rel="stylesheet" href="../../../assets/stylesheets/palette.ec60dfa4.min.css">
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700%7CRoboto+Mono&display=fallback">
<style>body,input{font-family:"Roboto",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif}code,kbd,pre{font-family:"Roboto Mono",SFMono-Regular,Consolas,Menlo,monospace}</style>
<link rel="stylesheet" href="../../../stylesheets/extra.css">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-90E1JB4HW4"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-90E1JB4HW4');
</script>
</head>
<body dir="ltr" data-md-color-scheme="default" data-md-color-primary="" data-md-color-accent="">
<script>var palette=JSON.parse(localStorage.getItem("__palette")||"{}");if(void 0!==palette.color)for(var key in 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>
<header class="md-header" data-md-component="header">
<nav class="md-header-nav md-grid" aria-label="Header">
<a href="https://docs.k8slens.dev" title="Lens Documentation" class="md-header-nav__button md-logo" aria-label="Lens Documentation">
<img src="../../../img/lens-logo-icon.svg" alt="logo">
</a>
<label class="md-header-nav__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-nav__title" data-md-component="header-title">
<div class="md-header-nav__ellipsis">
<div class="md-header-nav__topic">
<span class="md-ellipsis">
Lens Documentation
</span>
</div>
<div class="md-header-nav__topic">
<span class="md-ellipsis">
Extension Anatomy
</span>
</div>
</div>
</div>
<div class="md-header-nav__options">
<button class="md-header-nav__button md-icon" title="Switch to light mode" aria-label="Switch to light mode" data-md-option="palette" data-md-color-scheme="default" data-md-color-primary="" data-md-color-accent="" data-md-state="hidden">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 7H7a5 5 0 00-5 5 5 5 0 005 5h10a5 5 0 005-5 5 5 0 00-5-5m0 8a3 3 0 01-3-3 3 3 0 013-3 3 3 0 013 3 3 3 0 01-3 3z"/></svg>
</button>
<button class="md-header-nav__button md-icon" title="Switch to dark mode" aria-label="Switch to dark mode" data-md-option="palette" data-md-color-scheme="slate" data-md-color-primary="" data-md-color-accent="" data-md-state="hidden">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 10a2 2 0 012 2 2 2 0 01-2 2 2 2 0 01-2-2 2 2 0 012-2m10-3a5 5 0 015 5 5 5 0 01-5 5H7a5 5 0 01-5-5 5 5 0 015-5h10M7 9a3 3 0 00-3 3 3 3 0 003 3h10a3 3 0 003-3 3 3 0 00-3-3H7z"/></svg>
</button>
</div>
<label class="md-header-nav__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 0116 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 019.5 16 6.5 6.5 0 013 9.5 6.5 6.5 0 019.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" data-md-state="active">
<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 0116 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 019.5 16 6.5 6.5 0 013 9.5 6.5 6.5 0 019.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>
<button type="reset" class="md-search__icon md-icon" aria-label="Clear" data-md-component="search-reset" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41L17.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>
<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"></ol>
</div>
</div>
</div>
</div>
</div>
<div class="md-header-nav__source">
<a href="https://github.com/lensapp/lens" title="Go to repository" class="md-source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439.55 236.05L244 40.45a28.87 28.87 0 00-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 01-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 000 40.81l195.61 195.6a28.86 28.86 0 0040.8 0l194.69-194.69a28.86 28.86 0 000-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="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="https://docs.k8slens.dev" title="Lens Documentation" class="md-nav__button md-logo" aria-label="Lens Documentation">
<img src="../../../img/lens-logo-icon.svg" alt="logo">
</a>
Lens Documentation
</label>
<div class="md-nav__source">
<a href="https://github.com/lensapp/lens" title="Go to repository" class="md-source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439.55 236.05L244 40.45a28.87 28.87 0 00-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 01-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 000 40.81l195.61 195.6a28.86 28.86 0 0040.8 0l194.69-194.69a28.86 28.86 0 000-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">
<a href="../../../getting-started/" class="md-nav__link">
Getting Started
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="nav-3" type="checkbox" id="nav-3">
<label class="md-nav__link" for="nav-3">
Managing Clusters
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Managing Clusters" data-md-level="1">
<label class="md-nav__title" for="nav-3">
<span class="md-nav__icon md-icon"></span>
Managing Clusters
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../clusters/adding-clusters/" class="md-nav__link">
Adding clusters
</a>
</li>
<li class="md-nav__item">
<a href="../../../clusters/removing-clusters/" class="md-nav__link">
Removing cluster
</a>
</li>
<li class="md-nav__item">
<a href="../../../clusters/settings/" class="md-nav__link">
Settings
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../../../helm/" class="md-nav__link">
Using Helm Charts
</a>
</li>
<li class="md-nav__item">
<a href="../../usage/" class="md-nav__link">
Using Extensions
</a>
</li>
<li class="md-nav__item">
<a href="../../../getting-started/preferences/" class="md-nav__link">
Preferences
</a>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="nav-7" type="checkbox" id="nav-7" checked>
<label class="md-nav__link" for="nav-7">
Extension Development
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Extension Development" data-md-level="1">
<label class="md-nav__title" for="nav-7">
<span class="md-nav__icon md-icon"></span>
Extension Development
</label>
<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" data-md-toggle="nav-7-2" type="checkbox" id="nav-7-2" checked>
<label class="md-nav__link" for="nav-7-2">
Get Started
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Get Started" data-md-level="2">
<label class="md-nav__title" for="nav-7-2">
<span class="md-nav__icon md-icon"></span>
Get Started
</label>
<ul class="md-nav__list" data-md-scrollfix>
<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" 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>
<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" data-md-toggle="nav-7-3" type="checkbox" id="nav-7-3">
<label class="md-nav__link" for="nav-7-3">
Extension Capabilities
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Extension Capabilities" data-md-level="2">
<label class="md-nav__title" for="nav-7-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/" class="md-nav__link">
Overview
</a>
</li>
<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/theming/" class="md-nav__link">
Theming
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="nav-7-4" type="checkbox" id="nav-7-4">
<label class="md-nav__link" for="nav-7-4">
Extension Guides
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Extension Guides" data-md-level="2">
<label class="md-nav__title" for="nav-7-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/renderer-extension/" class="md-nav__link">
Renderer Extension
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="nav-7-5" type="checkbox" id="nav-7-5">
<label class="md-nav__link" for="nav-7-5">
Testing and Publishing
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Testing and Publishing" data-md-level="2">
<label class="md-nav__title" for="nav-7-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>
<li class="md-nav__item">
<a href="../../testing-and-publishing/bundling/" class="md-nav__link">
Bundling Extensions
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../../api/" class="md-nav__link">
API Reference
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
<label class="md-nav__link" for="nav-8">
Contributing
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Contributing" data-md-level="1">
<label class="md-nav__title" for="nav-8">
<span class="md-nav__icon md-icon"></span>
Contributing
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../contributing/" class="md-nav__link">
Overview
</a>
</li>
<li class="md-nav__item">
<a href="../../../contributing/development/" class="md-nav__link">
Development
</a>
</li>
<li class="md-nav__item">
<a href="../../../contributing/documentation/" class="md-nav__link">
Documentation
</a>
</li>
<li class="md-nav__item">
<a href="../../../contributing/maintainers/" class="md-nav__link">
Maintainers
</a>
</li>
<li class="md-nav__item">
<a href="../../../contributing/promotion/" class="md-nav__link">
Promotion
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../../../faq/" class="md-nav__link">
FAQ
</a>
</li>
</ul>
</nav>
</div>
</div>
</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 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&#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>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>@&lt;publisher&gt;/&lt;name&gt;</code> as a unique ID for the extension. For example, the Hello World sample has the ID <code>@lensapp-samples/helloworld-sample</code>. Lens uses the ID to uniquely identify your extension</li>
<li><code>main</code>: The extension's entry point run in <code>main</code> process.</li>
<li><code>renderer</code>: The extension's entry point run in <code>renderer</code> process.</li>
<li><code>engines.lens</code>: This specifies the minimum version of Lens API that the extension depends on.</li>
</ul>
<div class="highlight"><pre><span></span><code><span class="p">{</span>
<span class="s2">&quot;name&quot;</span><span class="o">:</span> <span class="s2">&quot;helloworld-sample&quot;</span><span class="p">,</span>
<span class="s2">&quot;publisher&quot;</span><span class="o">:</span> <span class="s2">&quot;lens-samples&quot;</span><span class="p">,</span>
<span class="s2">&quot;version&quot;</span><span class="o">:</span> <span class="s2">&quot;0.0.1&quot;</span><span class="p">,</span>
<span class="s2">&quot;description&quot;</span><span class="o">:</span> <span class="s2">&quot;Lens helloworld-sample&quot;</span><span class="p">,</span>
<span class="s2">&quot;license&quot;</span><span class="o">:</span> <span class="s2">&quot;MIT&quot;</span><span class="p">,</span>
<span class="s2">&quot;homepage&quot;</span><span class="o">:</span> <span class="s2">&quot;https://github.com/lensapp/lens-extension-samples&quot;</span><span class="p">,</span>
<span class="s2">&quot;engines&quot;</span><span class="o">:</span> <span class="p">{</span>
<span class="s2">&quot;lens&quot;</span><span class="o">:</span> <span class="s2">&quot;^4.0.0&quot;</span>
<span class="p">},</span>
<span class="s2">&quot;main&quot;</span><span class="o">:</span> <span class="s2">&quot;dist/main.js&quot;</span><span class="p">,</span>
<span class="s2">&quot;renderer&quot;</span><span class="o">:</span> <span class="s2">&quot;dist/renderer.js&quot;</span><span class="p">,</span>
<span class="s2">&quot;scripts&quot;</span><span class="o">:</span> <span class="p">{</span>
<span class="s2">&quot;build&quot;</span><span class="o">:</span> <span class="s2">&quot;webpack --config webpack.config.js&quot;</span><span class="p">,</span>
<span class="s2">&quot;dev&quot;</span><span class="o">:</span> <span class="s2">&quot;npm run build --watch&quot;</span>
<span class="p">},</span>
<span class="s2">&quot;dependencies&quot;</span><span class="o">:</span> <span class="p">{</span>
<span class="s2">&quot;react-open-doodles&quot;</span><span class="o">:</span> <span class="s2">&quot;^1.0.5&quot;</span>
<span class="p">},</span>
<span class="s2">&quot;devDependencies&quot;</span><span class="o">:</span> <span class="p">{</span>
<span class="s2">&quot;@k8slens/extensions&quot;</span><span class="o">:</span> <span class="s2">&quot;^4.0.0-alpha.2&quot;</span><span class="p">,</span>
<span class="s2">&quot;ts-loader&quot;</span><span class="o">:</span> <span class="s2">&quot;^8.0.4&quot;</span><span class="p">,</span>
<span class="s2">&quot;typescript&quot;</span><span class="o">:</span> <span class="s2">&quot;^4.0.3&quot;</span><span class="p">,</span>
<span class="s2">&quot;@types/react&quot;</span><span class="o">:</span> <span class="s2">&quot;^16.9.35&quot;</span><span class="p">,</span>
<span class="s2">&quot;@types/node&quot;</span><span class="o">:</span> <span class="s2">&quot;^12.0.0&quot;</span><span class="p">,</span>
<span class="s2">&quot;webpack&quot;</span><span class="o">:</span> <span class="s2">&quot;^4.44.2&quot;</span><span class="p">,</span>
<span class="s2">&quot;webpack-cli&quot;</span><span class="o">:</span> <span class="s2">&quot;^3.3.11&quot;</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">&quot;@k8slens/extensions&quot;</span><span class="p">;</span>
<span class="kr">import</span> <span class="p">{</span> <span class="nx">ExampleIcon</span><span class="p">,</span> <span class="nx">ExamplePage</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&quot;./page&quot;</span>
<span class="kr">import</span> <span class="nx">React</span> <span class="nx">from</span> <span class="s2">&quot;react&quot;</span>
<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">&quot;/extension-example&quot;</span><span class="p">,</span>
<span class="nx">title</span><span class="o">:</span> <span class="s2">&quot;Hello World&quot;</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">=&gt;</span> <span class="o">&lt;</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">/&gt;</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>
<hr>
<div class="md-source-date">
<small>
Last update: <span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-date">November 9, 2020</span>
</small>
</div>
</article>
</div>
</div>
</main>
<footer class="md-footer">
<div class="md-footer-nav">
<nav class="md-footer-nav__inner md-grid" aria-label="Footer">
<a href="../your-first-extension/" class="md-footer-nav__link md-footer-nav__link--prev" rel="prev">
<div class="md-footer-nav__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
</div>
<div class="md-footer-nav__title">
<div class="md-ellipsis">
<span class="md-footer-nav__direction">
Previous
</span>
Your First Extension
</div>
</div>
</a>
<a href="../wrapping-up/" class="md-footer-nav__link md-footer-nav__link--next" rel="next">
<div class="md-footer-nav__title">
<div class="md-ellipsis">
<span class="md-footer-nav__direction">
Next
</span>
Wrapping Up
</div>
</div>
<div class="md-footer-nav__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11H4z"/></svg>
</div>
</a>
</nav>
</div>
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-footer-copyright">
<div class="md-footer-copyright__highlight">
Copyright &copy; 2020 <a href="https://mirantis.com/">Mirantis Inc.</a> - All rights reserved.
</div>
</div>
<div class="md-footer-social">
<a href="https://github.com/lensapp/lens" target="_blank" rel="noopener" title="Lens on GitHub" class="md-footer-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><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-footer-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><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="http://k8slens.slack.com/" target="_blank" rel="noopener" title="Lens on Slack" class="md-footer-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M94.12 315.1c0 25.9-21.16 47.06-47.06 47.06S0 341 0 315.1c0-25.9 21.16-47.06 47.06-47.06h47.06v47.06zm23.72 0c0-25.9 21.16-47.06 47.06-47.06s47.06 21.16 47.06 47.06v117.84c0 25.9-21.16 47.06-47.06 47.06s-47.06-21.16-47.06-47.06V315.1zm47.06-188.98c-25.9 0-47.06-21.16-47.06-47.06S139 32 164.9 32s47.06 21.16 47.06 47.06v47.06H164.9zm0 23.72c25.9 0 47.06 21.16 47.06 47.06s-21.16 47.06-47.06 47.06H47.06C21.16 243.96 0 222.8 0 196.9s21.16-47.06 47.06-47.06H164.9zm188.98 47.06c0-25.9 21.16-47.06 47.06-47.06 25.9 0 47.06 21.16 47.06 47.06s-21.16 47.06-47.06 47.06h-47.06V196.9zm-23.72 0c0 25.9-21.16 47.06-47.06 47.06-25.9 0-47.06-21.16-47.06-47.06V79.06c0-25.9 21.16-47.06 47.06-47.06 25.9 0 47.06 21.16 47.06 47.06V196.9zM283.1 385.88c25.9 0 47.06 21.16 47.06 47.06 0 25.9-21.16 47.06-47.06 47.06-25.9 0-47.06-21.16-47.06-47.06v-47.06h47.06zm0-23.72c-25.9 0-47.06-21.16-47.06-47.06 0-25.9 21.16-47.06 47.06-47.06h117.84c25.9 0 47.06 21.16 47.06 47.06 0 25.9-21.16 47.06-47.06 47.06H283.1z"/></svg>
</a>
<a href="https://k8slens.dev/" target="_blank" rel="noopener" title="Lens Website" class="md-footer-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 01-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0120.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0020.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 00-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg>
</a>
</div>
</div>
</div>
</footer>
</div>
<script src="../../../assets/javascripts/vendor.4d7724a9.min.js"></script>
<script src="../../../assets/javascripts/bundle.0421a6ad.min.js"></script><script id="__lang" type="application/json">{"clipboard.copy": "Copy to clipboard", "clipboard.copied": "Copied to clipboard", "search.config.lang": "en", "search.config.pipeline": "trimmer, stopWordFilter", "search.config.separator": "[\\s\\-]+", "search.placeholder": "Search", "search.result.placeholder": "Type to start searching", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.term.missing": "Missing"}</script>
<script>
app = initialize({
base: "../../..",
features: ['navigation.instant', 'toc.autohide', 'search.suggest', 'search.highlight'],
search: Object.assign({
worker: "../../../assets/javascripts/worker/search.0f64ce30.min.js"
}, typeof search !== "undefined" && search),
version: {'method': 'mike'}
})
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink