mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Deployed fa58b94cd5 to master with MkDocs 1.2.2 and mike 1.0.1
This commit is contained in:
GitHub Action committed
1 parent
a85c6b8b9c
commit
e0eb08a4e2
60 files changed
+655
-655
No files matched your search
@@ -885,8 +885,8 @@ Only <code>renderer</code> can initiate this kind of request, and only <code>mai
|
||||
</ul>
|
||||
<p>To register either a handler or a listener, you should do something like the following:</p>
|
||||
<p><code>main.ts</code>:
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Main</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">IpcMain</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"./helpers/main"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Main</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">IpcMain</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"./helpers/main"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span> <span class="kd">class</span> <span class="nx">ExampleExtensionMain</span> <span class="k">extends</span> <span class="nx">Main</span><span class="p">.</span><span class="nx">LensExtension</span> <span class="p">{</span>
|
||||
<span class="nx">onActivate</span><span class="p">()</span> <span class="p">{</span>
|
||||
@@ -898,7 +898,7 @@ Only <code>renderer</code> can initiate this kind of request, and only <code>mai
|
||||
Lens will automatically clean up that store and all the handlers on deactivation and uninstall.</p>
|
||||
<hr />
|
||||
<p><code>helpers/main.ts</code>:
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Main</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Main</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span> <span class="kd">class</span> <span class="nx">IpcMain</span> <span class="k">extends</span> <span class="nx">Main</span><span class="p">.</span><span class="nx">Ipc</span> <span class="p">{</span>
|
||||
<span class="kr">constructor</span><span class="p">(</span><span class="nx">extension</span>: <span class="kt">Main.LensExtension</span><span class="p">)</span> <span class="p">{</span>
|
||||
@@ -916,21 +916,21 @@ Lens will automatically clean up that store and all the handlers on deactivation
|
||||
You should be able to just call <code>IpcMain.getInstance()</code> anywhere it is needed in your extension.</p>
|
||||
<hr />
|
||||
<p><code>renderer.ts</code>:
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">IpcRenderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"./helpers/renderer"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">IpcRenderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"./helpers/renderer"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span> <span class="kd">class</span> <span class="nx">ExampleExtensionRenderer</span> <span class="k">extends</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span> <span class="p">{</span>
|
||||
<span class="nx">onActivate</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">const</span> <span class="nx">ipc</span> <span class="o">=</span> <span class="nx">IpcRenderer</span><span class="p">.</span><span class="nx">createInstance</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
|
||||
|
||||
<span class="nx">setTimeout</span><span class="p">(()</span> <span class="o">=></span> <span class="nx">ipc</span><span class="p">.</span><span class="nx">broadcast</span><span class="p">(</span><span class="s2">"initialize"</span><span class="p">,</span> <span class="s2">"an-id"</span><span class="p">),</span> <span class="mf">5000</span><span class="p">);</span>
|
||||
<span class="nx">setTimeout</span><span class="p">(()</span> <span class="p">=></span> <span class="nx">ipc</span><span class="p">.</span><span class="nx">broadcast</span><span class="p">(</span><span class="s2">"initialize"</span><span class="p">,</span> <span class="s2">"an-id"</span><span class="p">),</span> <span class="mf">5000</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div></p>
|
||||
<p>It is also needed to create an instance to broadcast messages too.</p>
|
||||
<hr />
|
||||
<p><code>helpers/renderer.ts</code>:
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span> <span class="kd">class</span> <span class="nx">IpcRenderer</span> <span class="k">extends</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">Ipc</span> <span class="p">{}</span>
|
||||
</code></pre></div></p>
|
||||
|
||||
@@ -779,9 +779,9 @@ We will do this in our extension class <code>CrdSampleExtension</code> that is d
|
||||
<p>To register menu item in the cluster menu we need to register <code>PageMenuRegistration</code> object.
|
||||
This object will register a menu item with "Certificates" text.
|
||||
It will also use <code>CertificateIcon</code> component to render an icon and navigate to cluster page that is having <code>certificates</code> page id.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">type</span> <span class="nx">IconProps</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">Component</span><span class="p">.</span><span class="nx">IconProps</span><span class="p">;</span>
|
||||
<span class="kr">type</span> <span class="nx">IconProps</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">Component</span><span class="p">.</span><span class="nx">IconProps</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">const</span> <span class="p">{</span>
|
||||
<span class="nx">Component</span><span class="o">:</span> <span class="p">{</span>
|
||||
@@ -813,7 +813,7 @@ It will also use <code>CertificateIcon</code> component to render an icon and na
|
||||
<span class="nx">clusterPages</span> <span class="o">=</span> <span class="p">[{</span>
|
||||
<span class="nx">id</span><span class="o">:</span> <span class="s2">"certificates"</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">CertificatePage</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">Page</span><span class="o">:</span> <span class="p">()</span> <span class="p">=></span> <span class="o"><</span><span class="nx">CertificatePage</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">CertificateIcon</span><span class="p">,</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}]</span>
|
||||
@@ -828,7 +828,7 @@ In this step we will actually implement that.
|
||||
Lens Extensions API provides easy mechanism to do this.
|
||||
We just need to define <code>Certificate</code> class derived from <code>Renderer.K8sApi.KubeObject</code>, <code>CertificatesApi</code>derived from <code>Renderer.K8sApi.KubeApi</code> and <code>CertificatesStore</code> derived from <code>Renderer.K8sApi.KubeObjectStore</code>.</p>
|
||||
<p><code>Certificate</code> class defines properties found in the CRD object:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">const</span> <span class="p">{</span>
|
||||
<span class="nx">K8sApi</span><span class="o">:</span> <span class="p">{</span>
|
||||
@@ -875,7 +875,7 @@ We just need to define <code>Certificate</code> class derived from <code>Rendere
|
||||
<span class="nx">message</span>: <span class="kt">string</span><span class="p">;</span>
|
||||
<span class="nx">reason</span>: <span class="kt">string</span><span class="p">;</span>
|
||||
<span class="nx">status</span>: <span class="kt">string</span><span class="p">;</span>
|
||||
<span class="kd">type</span><span class="o">?:</span> <span class="kt">string</span><span class="p">;</span>
|
||||
<span class="kr">type</span><span class="nx">?</span>: <span class="kt">string</span><span class="p">;</span>
|
||||
<span class="p">}[];</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
@@ -883,7 +883,7 @@ We just need to define <code>Certificate</code> class derived from <code>Rendere
|
||||
<p>With <code>CertificatesApi</code> class we are able to manage <code>Certificate</code> objects in Kubernetes API:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">export</span> <span class="kd">class</span> <span class="nx">CertificatesApi</span> <span class="k">extends</span> <span class="nx">KubeApi</span><span class="o"><</span><span class="nx">Certificate</span><span class="o">></span> <span class="p">{}</span>
|
||||
|
||||
<span class="k">export</span> <span class="kd">const</span> <span class="nx">certificatesApi</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">CertificatesApi</span><span class="p">({</span>
|
||||
<span class="k">export</span> <span class="kd">const</span> <span class="nx">certificatesApi</span> <span class="o">=</span> <span class="ow">new</span> <span class="nx">CertificatesApi</span><span class="p">({</span>
|
||||
<span class="nx">objectConstructor</span>: <span class="kt">Certificate</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
@@ -892,7 +892,7 @@ We just need to define <code>Certificate</code> class derived from <code>Rendere
|
||||
<span class="nx">api</span> <span class="o">=</span> <span class="nx">certificatesApi</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">export</span> <span class="kd">const</span> <span class="nx">certificatesStore</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">CertificatesStore</span><span class="p">();</span>
|
||||
<span class="k">export</span> <span class="kd">const</span> <span class="nx">certificatesStore</span> <span class="o">=</span> <span class="ow">new</span> <span class="nx">CertificatesStore</span><span class="p">();</span>
|
||||
</code></pre></div>
|
||||
<p>And, finally, we register this store to Lens's API manager.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="nx">apiManager</span><span class="p">.</span><span class="nx">registerStore</span><span class="p">(</span><span class="nx">certificatesStore</span><span class="p">);</span>
|
||||
@@ -901,10 +901,10 @@ We just need to define <code>Certificate</code> class derived from <code>Rendere
|
||||
<p>Now we have created mechanism to manage <code>Certificate</code> objects in Kubernetes API.
|
||||
Then we need to fetch those and render them in the UI.</p>
|
||||
<p>First we define <code>CertificatePage</code> class that extends <code>React.Component</code>.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">certificatesStore</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"../certificate-store"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Certificate</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"../certificate"</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">certificatesStore</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"../certificate-store"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Certificate</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"../certificate"</span>
|
||||
|
||||
<span class="k">export</span> <span class="kd">class</span> <span class="nx">CertificatePage</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="o"><</span><span class="p">{</span> <span class="nx">extension</span>: <span class="kt">Renderer.LensExtension</span> <span class="p">}</span><span class="o">></span> <span class="p">{</span>
|
||||
|
||||
@@ -915,7 +915,7 @@ To do that, we just need to add <code>Renderer.Component.KubeObjectListLayout</c
|
||||
To define which objects the list is showing, we need to pass <code>certificateStore</code> object to <code>Renderer.Component.KubeObjectListLayout</code> in <code>store</code> property.
|
||||
<code>Renderer.Component.KubeObjectListLayout</code> will fetch automatically items from the given store when component is mounted.
|
||||
Also, we can define needed sorting callbacks and search filters for the list:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">const</span> <span class="p">{</span>
|
||||
<span class="nx">Component</span><span class="o">:</span> <span class="p">{</span>
|
||||
@@ -939,12 +939,12 @@ Also, we can define needed sorting callbacks and search filters for the list:</p
|
||||
<span class="o"><</span><span class="nx">KubeObjectListLayout</span>
|
||||
<span class="nx">className</span><span class="o">=</span><span class="s2">"Certificates"</span> <span class="nx">store</span><span class="o">=</span><span class="p">{</span><span class="nx">certificatesStore</span><span class="p">}</span>
|
||||
<span class="nx">sortingCallbacks</span><span class="o">=</span><span class="p">{{</span>
|
||||
<span class="p">[</span><span class="nx">sortBy</span><span class="p">.</span><span class="nx">name</span><span class="p">]</span><span class="o">:</span> <span class="p">(</span><span class="nx">certificate</span>: <span class="kt">Certificate</span><span class="p">)</span> <span class="o">=></span> <span class="nx">certificate</span><span class="p">.</span><span class="nx">getName</span><span class="p">(),</span>
|
||||
<span class="p">[</span><span class="nx">sortBy</span><span class="p">.</span><span class="nx">namespace</span><span class="p">]</span><span class="o">:</span> <span class="p">(</span><span class="nx">certificate</span>: <span class="kt">Certificate</span><span class="p">)</span> <span class="o">=></span> <span class="nx">certificate</span><span class="p">.</span><span class="nx">metadata</span><span class="p">.</span><span class="nx">namespace</span><span class="p">,</span>
|
||||
<span class="p">[</span><span class="nx">sortBy</span><span class="p">.</span><span class="nx">issuer</span><span class="p">]</span><span class="o">:</span> <span class="p">(</span><span class="nx">certificate</span>: <span class="kt">Certificate</span><span class="p">)</span> <span class="o">=></span> <span class="nx">certificate</span><span class="p">.</span><span class="nx">spec</span><span class="p">.</span><span class="nx">issuerRef</span><span class="p">.</span><span class="nx">name</span>
|
||||
<span class="p">[</span><span class="nx">sortBy</span><span class="p">.</span><span class="nx">name</span><span class="p">]</span><span class="o">:</span> <span class="p">(</span><span class="nx">certificate</span>: <span class="kt">Certificate</span><span class="p">)</span> <span class="p">=></span> <span class="nx">certificate</span><span class="p">.</span><span class="nx">getName</span><span class="p">(),</span>
|
||||
<span class="p">[</span><span class="nx">sortBy</span><span class="p">.</span><span class="nx">namespace</span><span class="p">]</span><span class="o">:</span> <span class="p">(</span><span class="nx">certificate</span>: <span class="kt">Certificate</span><span class="p">)</span> <span class="p">=></span> <span class="nx">certificate</span><span class="p">.</span><span class="nx">metadata</span><span class="p">.</span><span class="nx">namespace</span><span class="p">,</span>
|
||||
<span class="p">[</span><span class="nx">sortBy</span><span class="p">.</span><span class="nx">issuer</span><span class="p">]</span><span class="o">:</span> <span class="p">(</span><span class="nx">certificate</span>: <span class="kt">Certificate</span><span class="p">)</span> <span class="p">=></span> <span class="nx">certificate</span><span class="p">.</span><span class="nx">spec</span><span class="p">.</span><span class="nx">issuerRef</span><span class="p">.</span><span class="nx">name</span>
|
||||
<span class="p">}}</span>
|
||||
<span class="nx">searchFilters</span><span class="o">=</span><span class="p">{[</span>
|
||||
<span class="p">(</span><span class="nx">certificate</span>: <span class="kt">Certificate</span><span class="p">)</span> <span class="o">=></span> <span class="nx">certificate</span><span class="p">.</span><span class="nx">getSearchFields</span><span class="p">()</span>
|
||||
<span class="p">(</span><span class="nx">certificate</span>: <span class="kt">Certificate</span><span class="p">)</span> <span class="p">=></span> <span class="nx">certificate</span><span class="p">.</span><span class="nx">getSearchFields</span><span class="p">()</span>
|
||||
<span class="p">]}</span>
|
||||
<span class="nx">renderHeaderTitle</span><span class="o">=</span><span class="s2">"Certificates"</span>
|
||||
<span class="nx">renderTableHeader</span><span class="o">=</span><span class="p">{[</span>
|
||||
@@ -952,7 +952,7 @@ Also, we can define needed sorting callbacks and search filters for the list:</p
|
||||
<span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Namespace"</span><span class="p">,</span> <span class="nx">className</span><span class="o">:</span> <span class="s2">"namespace"</span><span class="p">,</span> <span class="nx">sortBy</span>: <span class="kt">sortBy.namespace</span> <span class="p">},</span>
|
||||
<span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Issuer"</span><span class="p">,</span> <span class="nx">className</span><span class="o">:</span> <span class="s2">"issuer"</span><span class="p">,</span> <span class="nx">sortBy</span>: <span class="kt">sortBy.namespace</span> <span class="p">},</span>
|
||||
<span class="p">]}</span>
|
||||
<span class="nx">renderTableContents</span><span class="o">=</span><span class="p">{(</span><span class="nx">certificate</span>: <span class="kt">Certificate</span><span class="p">)</span> <span class="o">=></span> <span class="p">[</span>
|
||||
<span class="nx">renderTableContents</span><span class="o">=</span><span class="p">{(</span><span class="nx">certificate</span>: <span class="kt">Certificate</span><span class="p">)</span> <span class="p">=></span> <span class="p">[</span>
|
||||
<span class="nx">certificate</span><span class="p">.</span><span class="nx">getName</span><span class="p">(),</span>
|
||||
<span class="nx">certificate</span><span class="p">.</span><span class="nx">metadata</span><span class="p">.</span><span class="nx">namespace</span><span class="p">,</span>
|
||||
<span class="nx">certificate</span><span class="p">.</span><span class="nx">spec</span><span class="p">.</span><span class="nx">issuerRef</span><span class="p">.</span><span class="nx">name</span>
|
||||
@@ -975,7 +975,7 @@ We will do this again in <code>CrdSampleExtension</code> class:</p>
|
||||
<span class="nx">kind</span>: <span class="kt">Certificate.kind</span><span class="p">,</span>
|
||||
<span class="nx">apiVersions</span><span class="o">:</span> <span class="p">[</span><span class="s2">"cert-manager.io/v1alpha2"</span><span class="p">],</span>
|
||||
<span class="nx">components</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">Details</span><span class="o">:</span> <span class="p">(</span><span class="nx">props</span>: <span class="kt">CertificateDetailsProps</span><span class="p">)</span> <span class="o">=></span> <span class="o"><</span><span class="nx">CertificateDetails</span> <span class="p">{...</span><span class="nx">props</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="nx">Details</span><span class="o">:</span> <span class="p">(</span><span class="nx">props</span>: <span class="kt">CertificateDetailsProps</span><span class="p">)</span> <span class="p">=></span> <span class="o"><</span><span class="nx">CertificateDetails</span> <span class="p">{...</span><span class="nx">props</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}]</span>
|
||||
<span class="p">}</span>
|
||||
@@ -984,9 +984,9 @@ We will do this again in <code>CrdSampleExtension</code> class:</p>
|
||||
So, next we need to implement that component.
|
||||
Lens will inject <code>Certificate</code> object into our component so we just need to render some information out of it.
|
||||
We can use <code>Renderer.Component.DrawerItem</code> component from Lens Extensions API to give the same look and feel as Lens is using elsewhere:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Certificate</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"../certificate"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Certificate</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"../certificate"</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">const</span> <span class="p">{</span>
|
||||
<span class="nx">Component</span><span class="o">:</span> <span class="p">{</span>
|
||||
@@ -1016,9 +1016,9 @@ We can use <code>Renderer.Component.DrawerItem</code> component from Lens Extens
|
||||
<span class="p">{</span><span class="nx">certificate</span><span class="p">.</span><span class="nx">spec</span><span class="p">.</span><span class="nx">secretName</span><span class="p">}</span>
|
||||
<span class="o"><</span><span class="err">/DrawerItem></span>
|
||||
<span class="o"><</span><span class="nx">DrawerItem</span> <span class="nx">name</span><span class="o">=</span><span class="s2">"Status"</span> <span class="nx">className</span><span class="o">=</span><span class="s2">"status"</span> <span class="nx">labelsOnly</span><span class="o">></span>
|
||||
<span class="p">{</span><span class="nx">certificate</span><span class="p">.</span><span class="nx">status</span><span class="p">.</span><span class="nx">conditions</span><span class="p">.</span><span class="nx">map</span><span class="p">((</span><span class="nx">condition</span><span class="p">,</span> <span class="nx">index</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
|
||||
<span class="kd">const</span> <span class="p">{</span> <span class="kd">type</span><span class="p">,</span> <span class="nx">reason</span><span class="p">,</span> <span class="nx">message</span><span class="p">,</span> <span class="nx">status</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">condition</span><span class="p">;</span>
|
||||
<span class="kd">const</span> <span class="nx">kind</span> <span class="o">=</span> <span class="kd">type</span> <span class="o">||</span> <span class="nx">reason</span><span class="p">;</span>
|
||||
<span class="p">{</span><span class="nx">certificate</span><span class="p">.</span><span class="nx">status</span><span class="p">.</span><span class="nx">conditions</span><span class="p">.</span><span class="nx">map</span><span class="p">((</span><span class="nx">condition</span><span class="p">,</span> <span class="nx">index</span><span class="p">)</span> <span class="p">=></span> <span class="p">{</span>
|
||||
<span class="kd">const</span> <span class="p">{</span> <span class="kr">type</span><span class="p">,</span> <span class="nx">reason</span><span class="p">,</span> <span class="nx">message</span><span class="p">,</span> <span class="nx">status</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">condition</span><span class="p">;</span>
|
||||
<span class="kd">const</span> <span class="nx">kind</span> <span class="o">=</span> <span class="kr">type</span> <span class="o">||</span> <span class="nx">reason</span><span class="p">;</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">kind</span><span class="p">)</span> <span class="k">return</span> <span class="kc">null</span><span class="p">;</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">Badge</span>
|
||||
|
||||
@@ -822,7 +822,7 @@ It also provides convenient methods for navigating to built-in Lens pages and ex
|
||||
<h2 id="mainlensextension-class"><code>Main.LensExtension</code> Class<a class="headerlink" href="#mainlensextension-class" title="Permanent link">#</a></h2>
|
||||
<h3 id="onactivate-and-ondeactivate-methods"><code>onActivate()</code> and <code>onDeactivate()</code> Methods<a class="headerlink" href="#onactivate-and-ondeactivate-methods" title="Permanent link">#</a></h3>
|
||||
<p>To create a main extension simply extend the <code>Main.LensExtension</code> class:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Main</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Main</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span> <span class="k">default</span> <span class="kd">class</span> <span class="nx">ExampleExtensionMain</span> <span class="k">extends</span> <span class="nx">Main</span><span class="p">.</span><span class="nx">LensExtension</span> <span class="p">{</span>
|
||||
<span class="nx">onActivate</span><span class="p">()</span> <span class="p">{</span>
|
||||
@@ -852,7 +852,7 @@ Achieve this by starting Lens from the command prompt.</p>
|
||||
<p>The Main Extension API allows you to customize the UI application menu.
|
||||
Note that this is the only UI feature that the Main Extension API allows you to customize.
|
||||
The following example demonstrates adding an item to the <strong>Help</strong> menu.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Main</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Main</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span> <span class="k">default</span> <span class="kd">class</span> <span class="nx">SamplePageMainExtension</span> <span class="k">extends</span> <span class="nx">Main</span><span class="p">.</span><span class="nx">LensExtension</span> <span class="p">{</span>
|
||||
<span class="nx">appMenus</span> <span class="o">=</span> <span class="p">[</span>
|
||||
@@ -880,14 +880,14 @@ However, you would typically have this navigate to a specific page or perform an
|
||||
Note that pages are associated with the <a href="../renderer-extension/"><code>Renderer.LensExtension</code></a> class and can be defined in the process of extending it.</li>
|
||||
</ul>
|
||||
<p>The following example demonstrates how an application menu can be used to navigate to such a page:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Main</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Main</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span> <span class="k">default</span> <span class="kd">class</span> <span class="nx">SamplePageMainExtension</span> <span class="k">extends</span> <span class="nx">Main</span><span class="p">.</span><span class="nx">LensExtension</span> <span class="p">{</span>
|
||||
<span class="nx">appMenus</span> <span class="o">=</span> <span class="p">[</span>
|
||||
<span class="p">{</span>
|
||||
<span class="nx">parentId</span><span class="o">:</span> <span class="s2">"help"</span><span class="p">,</span>
|
||||
<span class="nx">label</span><span class="o">:</span> <span class="s2">"Sample"</span><span class="p">,</span>
|
||||
<span class="nx">click</span><span class="o">:</span> <span class="p">()</span> <span class="o">=></span> <span class="k">this</span><span class="p">.</span><span class="nx">navigate</span><span class="p">(</span><span class="s2">"myGlobalPage"</span><span class="p">)</span>
|
||||
<span class="nx">click</span><span class="o">:</span> <span class="p">()</span> <span class="p">=></span> <span class="k">this</span><span class="p">.</span><span class="nx">navigate</span><span class="p">(</span><span class="s2">"myGlobalPage"</span><span class="p">)</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">]</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@@ -801,7 +801,7 @@ Handlers will be run in both <code>main</code> and <code>renderer</code> in para
|
||||
Furthermore, both <code>main</code> and <code>renderer</code> are routed separately.
|
||||
In other words, which handler is selected in either process is independent from the list of possible handlers in the other.</p>
|
||||
<p>Example of registering a handler:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Main</span><span class="p">,</span> <span class="nx">Common</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Main</span><span class="p">,</span> <span class="nx">Common</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">function</span> <span class="nx">rootHandler</span><span class="p">(</span><span class="nx">params</span>: <span class="kt">Common.Types.ProtocolRouteParams</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"routed to ExampleExtension"</span><span class="p">,</span> <span class="nx">params</span><span class="p">);</span>
|
||||
|
||||
@@ -1028,7 +1028,7 @@ The Renderer Extension API allows you to access, configure, and customize Lens d
|
||||
<h2 id="rendererlensextension-class"><code>Renderer.LensExtension</code> Class<a class="headerlink" href="#rendererlensextension-class" title="Permanent link">#</a></h2>
|
||||
<h3 id="onactivate-and-ondeactivate-methods"><code>onActivate()</code> and <code>onDeactivate()</code> Methods<a class="headerlink" href="#onactivate-and-ondeactivate-methods" title="Permanent link">#</a></h3>
|
||||
<p>To create a renderer extension, extend the <code>Renderer.LensExtension</code> class:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span> <span class="k">default</span> <span class="kd">class</span> <span class="nx">ExampleExtensionMain</span> <span class="k">extends</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span> <span class="p">{</span>
|
||||
<span class="nx">onActivate</span><span class="p">()</span> <span class="p">{</span>
|
||||
@@ -1060,16 +1060,16 @@ Use cluster pages to display information about or add functionality to the activ
|
||||
It is also possible to include custom details from other clusters.
|
||||
Use your extension to access Kubernetes resources in the active cluster with <a href="../stores#Clusterstore"><code>ClusterStore.getInstance()</code></a>.</p>
|
||||
<p>Add a cluster page definition to a <code>Renderer.LensExtension</code> subclass with the following example:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExampleIcon</span><span class="p">,</span> <span class="nx">ExamplePage</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"./page"</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExampleIcon</span><span class="p">,</span> <span class="nx">ExamplePage</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"./page"</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span>
|
||||
|
||||
<span class="k">export</span> <span class="k">default</span> <span class="kd">class</span> <span class="nx">ExampleExtension</span> <span class="k">extends</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</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">id</span><span class="o">:</span> <span class="s2">"hello"</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">Page</span><span class="o">:</span> <span class="p">()</span> <span class="p">=></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="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">];</span>
|
||||
@@ -1084,8 +1084,8 @@ The properties of the <code>clusterPages</code> array objects are defined as fol
|
||||
It offers flexibility in defining the appearance and behavior of your page.</li>
|
||||
</ul>
|
||||
<p><code>ExamplePage</code> in the example above can be defined in <code>page.tsx</code>:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span>
|
||||
|
||||
<span class="k">export</span> <span class="kd">class</span> <span class="nx">ExamplePage</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="o"><</span><span class="p">{</span> <span class="nx">extension</span>: <span class="kt">LensRendererExtension</span> <span class="p">}</span><span class="o">></span> <span class="p">{</span>
|
||||
<span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
|
||||
@@ -1105,16 +1105,16 @@ Use <code>clusterPageMenus</code>, covered in the next section, to add cluster p
|
||||
<h3 id="clusterpagemenus"><code>clusterPageMenus</code><a class="headerlink" href="#clusterpagemenus" title="Permanent link">#</a></h3>
|
||||
<p><code>clusterPageMenus</code> allows you to add cluster page menu items to the secondary left nav, below Lens's standard cluster menus like <strong>Workloads</strong>, <strong>Custom Resources</strong>, etc.</p>
|
||||
<p>By expanding on the above example, you can add a cluster page menu item to the <code>ExampleExtension</code> definition:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExampleIcon</span><span class="p">,</span> <span class="nx">ExamplePage</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"./page"</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExampleIcon</span><span class="p">,</span> <span class="nx">ExamplePage</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"./page"</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span>
|
||||
|
||||
<span class="k">export</span> <span class="k">default</span> <span class="kd">class</span> <span class="nx">ExampleExtension</span> <span class="k">extends</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</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">id</span><span class="o">:</span> <span class="s2">"hello"</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">Page</span><span class="o">:</span> <span class="p">()</span> <span class="p">=></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="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">];</span>
|
||||
@@ -1142,10 +1142,10 @@ The properties of the <code>clusterPageMenus</code> array objects are defined as
|
||||
<p>The above example creates a menu item that reads <strong>Hello World</strong>.
|
||||
When users click <strong>Hello World</strong>, the cluster dashboard will show the contents of <code>Example Page</code>.</p>
|
||||
<p>This example requires the definition of another React-based component, <code>ExampleIcon</code>, which has been added to <code>page.tsx</code>, as follows:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span>
|
||||
|
||||
<span class="kd">type</span> <span class="nx">IconProps</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">Component</span><span class="p">.</span><span class="nx">IconProps</span><span class="p">;</span>
|
||||
<span class="kr">type</span> <span class="nx">IconProps</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">Component</span><span class="p">.</span><span class="nx">IconProps</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">const</span> <span class="p">{</span>
|
||||
<span class="nx">Component</span><span class="o">:</span> <span class="p">{</span> <span class="nx">Icon</span> <span class="p">},</span>
|
||||
@@ -1174,22 +1174,22 @@ The properties that <code>Renderer.Component.Icon</code> uses are defined as fol
|
||||
</ul>
|
||||
<p><code>clusterPageMenus</code> can also be used to define sub menu items, so that you can create groups of cluster pages.
|
||||
The following example groups two sub menu items under one parent menu item:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExampleIcon</span><span class="p">,</span> <span class="nx">ExamplePage</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"./page"</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExampleIcon</span><span class="p">,</span> <span class="nx">ExamplePage</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"./page"</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span>
|
||||
|
||||
<span class="k">export</span> <span class="k">default</span> <span class="kd">class</span> <span class="nx">ExampleExtension</span> <span class="k">extends</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</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">id</span><span class="o">:</span> <span class="s2">"hello"</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">Page</span><span class="o">:</span> <span class="p">()</span> <span class="p">=></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="p">}</span>
|
||||
<span class="p">},</span>
|
||||
<span class="p">{</span>
|
||||
<span class="nx">id</span><span class="o">:</span> <span class="s2">"bonjour"</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">ExemplePage</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">Page</span><span class="o">:</span> <span class="p">()</span> <span class="p">=></span> <span class="o"><</span><span class="nx">ExemplePage</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="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">];</span>
|
||||
@@ -1239,16 +1239,16 @@ A cluster page menu object is defined to be a submenu item by setting the <code>
|
||||
Their primary use is to display information and provide functionality across clusters (or catalog entities), including customized data and functionality unique to your extension.</p>
|
||||
<p>Unlike cluster pages, users can trigger global pages even when there is no active cluster (or catalog entity).</p>
|
||||
<p>The following example defines a <code>Renderer.LensExtension</code> subclass with a single global page definition:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s1">'@k8slens/extensions'</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">HelpPage</span> <span class="p">}</span> <span class="k">from</span> <span class="s1">'./page'</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s1">'react'</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@k8slens/extensions'</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">HelpPage</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'./page'</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s1">'react'</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span> <span class="k">default</span> <span class="kd">class</span> <span class="nx">HelpExtension</span> <span class="k">extends</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span> <span class="p">{</span>
|
||||
<span class="nx">globalPages</span> <span class="o">=</span> <span class="p">[</span>
|
||||
<span class="p">{</span>
|
||||
<span class="nx">id</span><span class="o">:</span> <span class="s2">"help"</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">HelpPage</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">Page</span><span class="o">:</span> <span class="p">()</span> <span class="p">=></span> <span class="o"><</span><span class="nx">HelpPage</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="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">];</span>
|
||||
@@ -1263,8 +1263,8 @@ The properties of the <code>globalPages</code> array objects are defined as foll
|
||||
It offers flexibility in defining the appearance and behavior of your page.</li>
|
||||
</ul>
|
||||
<p><code>HelpPage</code> in the example above can be defined in <code>page.tsx</code>:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span>
|
||||
|
||||
<span class="k">export</span> <span class="kd">class</span> <span class="nx">HelpPage</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="o"><</span><span class="p">{</span> <span class="nx">extension</span>: <span class="kt">LensRendererExtension</span> <span class="p">}</span><span class="o">></span> <span class="p">{</span>
|
||||
<span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
|
||||
@@ -1291,10 +1291,10 @@ Global pages are typically made available in the following ways:</p>
|
||||
<p>The Lens <strong>Preferences</strong> page is a built-in global page.
|
||||
You can use Lens extensions to add custom preferences to the Preferences page, providing a single location for users to configure global options.</p>
|
||||
<p>The following example demonstrates adding a custom preference:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExamplePreferenceHint</span><span class="p">,</span> <span class="nx">ExamplePreferenceInput</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"./src/example-preference"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">observable</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"mobx"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExamplePreferenceHint</span><span class="p">,</span> <span class="nx">ExamplePreferenceInput</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"./src/example-preference"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">observable</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"mobx"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span> <span class="k">default</span> <span class="kd">class</span> <span class="nx">ExampleRendererExtension</span> <span class="k">extends</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span> <span class="p">{</span>
|
||||
|
||||
@@ -1304,8 +1304,8 @@ You can use Lens extensions to add custom preferences to the Preferences page, p
|
||||
<span class="p">{</span>
|
||||
<span class="nx">title</span><span class="o">:</span> <span class="s2">"Example Preferences"</span><span class="p">,</span>
|
||||
<span class="nx">components</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">Input</span><span class="o">:</span> <span class="p">()</span> <span class="o">=></span> <span class="o"><</span><span class="nx">ExamplePreferenceInput</span> <span class="nx">preference</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">preference</span><span class="p">}</span><span class="o">/></span><span class="p">,</span>
|
||||
<span class="nx">Hint</span><span class="o">:</span> <span class="p">()</span> <span class="o">=></span> <span class="o"><</span><span class="nx">ExamplePreferenceHint</span><span class="o">/></span>
|
||||
<span class="nx">Input</span><span class="o">:</span> <span class="p">()</span> <span class="p">=></span> <span class="o"><</span><span class="nx">ExamplePreferenceInput</span> <span class="nx">preference</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">preference</span><span class="p">}</span><span class="o">/></span><span class="p">,</span>
|
||||
<span class="nx">Hint</span><span class="o">:</span> <span class="p">()</span> <span class="p">=></span> <span class="o"><</span><span class="nx">ExamplePreferenceHint</span><span class="o">/></span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">];</span>
|
||||
@@ -1329,10 +1329,10 @@ The properties of the <code>appPreferences</code> array objects are defined as f
|
||||
This is how <code>ExampleRendererExtension</code> handles the state of the preference input.
|
||||
<code>ExampleRendererExtension</code> has a <code>preference</code> field, which you will add to <code>ExamplePreferenceInput</code>.</p>
|
||||
<p>In this example <code>ExamplePreferenceInput</code>, <code>ExamplePreferenceHint</code>, and <code>ExamplePreferenceProps</code> are defined in <code>./src/example-preference.tsx</code> as follows:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">makeObservable</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"mobx"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">observer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"mobx-react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">makeObservable</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"mobx"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">observer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"mobx-react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">const</span> <span class="p">{</span>
|
||||
<span class="nx">Component</span><span class="o">:</span> <span class="p">{</span>
|
||||
@@ -1360,7 +1360,7 @@ This is how <code>ExampleRendererExtension</code> handles the state of the prefe
|
||||
<span class="o"><</span><span class="nx">Checkbox</span>
|
||||
<span class="nx">label</span><span class="o">=</span><span class="s2">"I understand appPreferences"</span>
|
||||
<span class="nx">value</span><span class="o">=</span><span class="p">{</span><span class="nx">preference</span><span class="p">.</span><span class="nx">enabled</span><span class="p">}</span>
|
||||
<span class="nx">onChange</span><span class="o">=</span><span class="p">{</span><span class="nx">v</span> <span class="o">=></span> <span class="p">{</span> <span class="nx">preference</span><span class="p">.</span><span class="nx">enabled</span> <span class="o">=</span> <span class="nx">v</span><span class="p">;</span> <span class="p">}}</span>
|
||||
<span class="nx">onChange</span><span class="o">=</span><span class="p">{</span><span class="nx">v</span> <span class="p">=></span> <span class="p">{</span> <span class="nx">preference</span><span class="p">.</span><span class="nx">enabled</span> <span class="o">=</span> <span class="nx">v</span><span class="p">;</span> <span class="p">}}</span>
|
||||
<span class="o">/></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
@@ -1400,16 +1400,16 @@ However, we recommend that you manage your extension's state data using <a href=
|
||||
They can be used to display status information, or act as links to global pages as well as external pages.</p>
|
||||
<p>The following example adds a <code>statusBarItems</code> definition and a <code>globalPages</code> definition to a <code>LensRendererExtension</code> subclass.
|
||||
It configures the status bar item to navigate to the global page upon activation (normally a mouse click):</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s1">'@k8slens/extensions'</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">HelpIcon</span><span class="p">,</span> <span class="nx">HelpPage</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"./page"</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s1">'react'</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@k8slens/extensions'</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">HelpIcon</span><span class="p">,</span> <span class="nx">HelpPage</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"./page"</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s1">'react'</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span> <span class="k">default</span> <span class="kd">class</span> <span class="nx">HelpExtension</span> <span class="k">extends</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span> <span class="p">{</span>
|
||||
<span class="nx">globalPages</span> <span class="o">=</span> <span class="p">[</span>
|
||||
<span class="p">{</span>
|
||||
<span class="nx">id</span><span class="o">:</span> <span class="s2">"help"</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">HelpPage</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">Page</span><span class="o">:</span> <span class="p">()</span> <span class="p">=></span> <span class="o"><</span><span class="nx">HelpPage</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="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">];</span>
|
||||
@@ -1420,7 +1420,7 @@ It configures the status bar item to navigate to the global page upon activation
|
||||
<span class="nx">Item</span><span class="o">:</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">div</span>
|
||||
<span class="nx">className</span><span class="o">=</span><span class="s2">"flex align-center gaps"</span>
|
||||
<span class="nx">onClick</span><span class="o">=</span><span class="p">{()</span> <span class="o">=></span> <span class="k">this</span><span class="p">.</span><span class="nx">navigate</span><span class="p">(</span><span class="s2">"help"</span><span class="p">)}</span>
|
||||
<span class="nx">onClick</span><span class="o">=</span><span class="p">{()</span> <span class="p">=></span> <span class="k">this</span><span class="p">.</span><span class="nx">navigate</span><span class="p">(</span><span class="s2">"help"</span><span class="p">)}</span>
|
||||
<span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">HelpIcon</span> <span class="o">/></span>
|
||||
<span class="nx">My</span> <span class="nx">Status</span> <span class="nx">Bar</span> <span class="nx">Item</span>
|
||||
@@ -1449,12 +1449,12 @@ Thus, clicking the status bar item activates the associated global pages.</li>
|
||||
<p>They also appear on the title bar of the details page for specific resources:</p>
|
||||
<p><img alt="Details" src="../images/kubeobjectmenuitemdetail.png" /></p>
|
||||
<p>The following example shows how to add a <code>kubeObjectMenuItems</code> for namespace resources with an associated action:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">NamespaceMenuItem</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"./src/namespace-menu-item"</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">NamespaceMenuItem</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"./src/namespace-menu-item"</span>
|
||||
|
||||
<span class="kd">type</span> <span class="nx">KubeObjectMenuProps</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">Component</span><span class="p">.</span><span class="nx">KubeObjectMenuProps</span><span class="p">;</span>
|
||||
<span class="kd">type</span> <span class="nx">Namespace</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">K8sApi</span><span class="p">.</span><span class="nx">Namespace</span><span class="p">;</span>
|
||||
<span class="kr">type</span> <span class="nx">KubeObjectMenuProps</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">Component</span><span class="p">.</span><span class="nx">KubeObjectMenuProps</span><span class="p">;</span>
|
||||
<span class="kr">type</span> <span class="nx">Namespace</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">K8sApi</span><span class="p">.</span><span class="nx">Namespace</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span> <span class="k">default</span> <span class="kd">class</span> <span class="nx">ExampleExtension</span> <span class="k">extends</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span> <span class="p">{</span>
|
||||
<span class="nx">kubeObjectMenuItems</span> <span class="o">=</span> <span class="p">[</span>
|
||||
@@ -1462,7 +1462,7 @@ Thus, clicking the status bar item activates the associated global pages.</li>
|
||||
<span class="nx">kind</span><span class="o">:</span> <span class="s2">"Namespace"</span><span class="p">,</span>
|
||||
<span class="nx">apiVersions</span><span class="o">:</span> <span class="p">[</span><span class="s2">"v1"</span><span class="p">],</span>
|
||||
<span class="nx">components</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">MenuItem</span><span class="o">:</span> <span class="p">(</span><span class="nx">props</span>: <span class="kt">KubeObjectMenuProps</span><span class="o"><</span><span class="nx">Namespace</span><span class="o">></span><span class="p">)</span> <span class="o">=></span> <span class="o"><</span><span class="nx">NamespaceMenuItem</span> <span class="p">{...</span><span class="nx">props</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="nx">MenuItem</span><span class="o">:</span> <span class="p">(</span><span class="nx">props</span>: <span class="kt">KubeObjectMenuProps</span><span class="o"><</span><span class="nx">Namespace</span><span class="o">></span><span class="p">)</span> <span class="p">=></span> <span class="o"><</span><span class="nx">NamespaceMenuItem</span> <span class="p">{...</span><span class="nx">props</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">];</span>
|
||||
@@ -1479,8 +1479,8 @@ The properties of the <code>kubeObjectMenuItems</code> array objects are defined
|
||||
In this example a <code>NamespaceMenuItem</code> object is returned.</li>
|
||||
</ul>
|
||||
<p><code>NamespaceMenuItem</code> is defined in <code>./src/namespace-menu-item.tsx</code>:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">const</span> <span class="p">{</span>
|
||||
<span class="nx">Component</span><span class="o">:</span> <span class="p">{</span>
|
||||
@@ -1491,8 +1491,8 @@ In this example a <code>NamespaceMenuItem</code> object is returned.</li>
|
||||
<span class="nx">Navigation</span><span class="p">,</span>
|
||||
<span class="p">}</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">type</span> <span class="nx">KubeObjectMenuProps</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">Component</span><span class="p">.</span><span class="nx">KubeObjectMenuProps</span><span class="p">;</span>
|
||||
<span class="kd">type</span> <span class="nx">Namespace</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">K8sApi</span><span class="p">.</span><span class="nx">Namespace</span><span class="p">;</span>
|
||||
<span class="kr">type</span> <span class="nx">KubeObjectMenuProps</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">Component</span><span class="p">.</span><span class="nx">KubeObjectMenuProps</span><span class="p">;</span>
|
||||
<span class="kr">type</span> <span class="nx">Namespace</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">K8sApi</span><span class="p">.</span><span class="nx">Namespace</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span> <span class="kd">function</span> <span class="nx">NamespaceMenuItem</span><span class="p">(</span><span class="nx">props</span>: <span class="kt">KubeObjectMenuProps</span><span class="o"><</span><span class="nx">Namespace</span><span class="o">></span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">const</span> <span class="p">{</span> <span class="nx">object</span>: <span class="kt">namespace</span><span class="p">,</span> <span class="nx">toolbar</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">props</span><span class="p">;</span>
|
||||
@@ -1500,7 +1500,7 @@ In this example a <code>NamespaceMenuItem</code> object is returned.</li>
|
||||
|
||||
<span class="kd">const</span> <span class="nx">namespaceName</span> <span class="o">=</span> <span class="nx">namespace</span><span class="p">.</span><span class="nx">getName</span><span class="p">();</span>
|
||||
|
||||
<span class="kd">const</span> <span class="nx">sendToTerminal</span> <span class="o">=</span> <span class="p">(</span><span class="nx">command</span>: <span class="kt">string</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
|
||||
<span class="kd">const</span> <span class="nx">sendToTerminal</span> <span class="o">=</span> <span class="p">(</span><span class="nx">command</span>: <span class="kt">string</span><span class="p">)</span> <span class="p">=></span> <span class="p">{</span>
|
||||
<span class="nx">terminalStore</span><span class="p">.</span><span class="nx">sendCommand</span><span class="p">(</span><span class="nx">command</span><span class="p">,</span> <span class="p">{</span>
|
||||
<span class="nx">enter</span>: <span class="kt">true</span><span class="p">,</span>
|
||||
<span class="nx">newTab</span>: <span class="kt">true</span><span class="p">,</span>
|
||||
@@ -1508,7 +1508,7 @@ In this example a <code>NamespaceMenuItem</code> object is returned.</li>
|
||||
<span class="nx">Navigation</span><span class="p">.</span><span class="nx">hideDetails</span><span class="p">();</span>
|
||||
<span class="p">};</span>
|
||||
|
||||
<span class="kd">const</span> <span class="nx">getPods</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
|
||||
<span class="kd">const</span> <span class="nx">getPods</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=></span> <span class="p">{</span>
|
||||
<span class="nx">sendToTerminal</span><span class="p">(</span><span class="sb">`kubectl get pods -n </span><span class="si">${</span><span class="nx">namespaceName</span><span class="si">}</span><span class="sb">`</span><span class="p">);</span>
|
||||
<span class="p">};</span>
|
||||
|
||||
@@ -1532,13 +1532,13 @@ Thus, <code>kubeObjectMenuItems</code> afford convenient access to the specific
|
||||
These custom details appear on the details page for a specific resource, such as a Namespace as shown here:</p>
|
||||
<p><img alt="Details" src="../images/kubeobjectdetailitem.png" /></p>
|
||||
<p>The following example shows how to use <code>kubeObjectDetailItems</code> to add a tabulated list of pods to the Namespace resource details page:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">NamespaceDetailsItem</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"./src/namespace-details-item"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">NamespaceDetailsItem</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"./src/namespace-details-item"</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">type</span> <span class="nx">KubeObjectMenuProps</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">Component</span><span class="p">.</span><span class="nx">KubeObjectMenuProps</span><span class="p">;</span>
|
||||
<span class="kd">type</span> <span class="nx">KubeObjectDetailsProps</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">Component</span><span class="p">.</span><span class="nx">KubeObjectDetailsProps</span><span class="p">;</span>
|
||||
<span class="kd">type</span> <span class="nx">Namespace</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">K8sApi</span><span class="p">.</span><span class="nx">Namespace</span><span class="p">;</span>
|
||||
<span class="kr">type</span> <span class="nx">KubeObjectMenuProps</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">Component</span><span class="p">.</span><span class="nx">KubeObjectMenuProps</span><span class="p">;</span>
|
||||
<span class="kr">type</span> <span class="nx">KubeObjectDetailsProps</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">Component</span><span class="p">.</span><span class="nx">KubeObjectDetailsProps</span><span class="p">;</span>
|
||||
<span class="kr">type</span> <span class="nx">Namespace</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">K8sApi</span><span class="p">.</span><span class="nx">Namespace</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span> <span class="k">default</span> <span class="kd">class</span> <span class="nx">ExampleExtension</span> <span class="k">extends</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span> <span class="p">{</span>
|
||||
<span class="nx">kubeObjectDetailItems</span> <span class="o">=</span> <span class="p">[</span>
|
||||
@@ -1547,7 +1547,7 @@ These custom details appear on the details page for a specific resource, such as
|
||||
<span class="nx">apiVersions</span><span class="o">:</span> <span class="p">[</span><span class="s2">"v1"</span><span class="p">],</span>
|
||||
<span class="nx">priority</span>: <span class="kt">10</span><span class="p">,</span>
|
||||
<span class="nx">components</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">Details</span><span class="o">:</span> <span class="p">(</span><span class="nx">props</span>: <span class="kt">KubeObjectDetailsProps</span><span class="o"><</span><span class="nx">Namespace</span><span class="o">></span><span class="p">)</span> <span class="o">=></span> <span class="o"><</span><span class="nx">NamespaceDetailsItem</span> <span class="p">{...</span><span class="nx">props</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="nx">Details</span><span class="o">:</span> <span class="p">(</span><span class="nx">props</span>: <span class="kt">KubeObjectDetailsProps</span><span class="o"><</span><span class="nx">Namespace</span><span class="o">></span><span class="p">)</span> <span class="p">=></span> <span class="o"><</span><span class="nx">NamespaceDetailsItem</span> <span class="p">{...</span><span class="nx">props</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">];</span>
|
||||
@@ -1564,11 +1564,11 @@ The properties of the <code>kubeObjectDetailItems</code> array objects are defin
|
||||
In this example a <code>NamespaceDetailsItem</code> object is returned.</li>
|
||||
</ul>
|
||||
<p><code>NamespaceDetailsItem</code> is defined in <code>./src/namespace-details-item.tsx</code>:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">PodsDetailsList</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"./pods-details-list"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">observable</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"mobx"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">observer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"mobx-react"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">PodsDetailsList</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"./pods-details-list"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">observable</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"mobx"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">observer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"mobx-react"</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">const</span> <span class="p">{</span>
|
||||
<span class="nx">K8sApi</span><span class="o">:</span> <span class="p">{</span>
|
||||
@@ -1579,9 +1579,9 @@ In this example a <code>NamespaceDetailsItem</code> object is returned.</li>
|
||||
<span class="p">},</span>
|
||||
<span class="p">}</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">type</span> <span class="nx">KubeObjectMenuProps</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">Component</span><span class="p">.</span><span class="nx">KubeObjectMenuProps</span><span class="p">;</span>
|
||||
<span class="kd">type</span> <span class="nx">Namespace</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">K8sApi</span><span class="p">.</span><span class="nx">Namespace</span><span class="p">;</span>
|
||||
<span class="kd">type</span> <span class="nx">Pod</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">K8sApi</span><span class="p">.</span><span class="nx">Pod</span><span class="p">;</span>
|
||||
<span class="kr">type</span> <span class="nx">KubeObjectMenuProps</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">Component</span><span class="p">.</span><span class="nx">KubeObjectMenuProps</span><span class="p">;</span>
|
||||
<span class="kr">type</span> <span class="nx">Namespace</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">K8sApi</span><span class="p">.</span><span class="nx">Namespace</span><span class="p">;</span>
|
||||
<span class="kr">type</span> <span class="nx">Pod</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">K8sApi</span><span class="p">.</span><span class="nx">Pod</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">@observer</span>
|
||||
<span class="k">export</span> <span class="kd">class</span> <span class="nx">NamespaceDetailsItem</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="o"><</span><span class="nx">KubeObjectDetailsProps</span><span class="o"><</span><span class="nx">Namespace</span><span class="o">>></span> <span class="p">{</span>
|
||||
@@ -1620,8 +1620,8 @@ This is done simply by marking the <code>pods</code> field as an <code>observabl
|
||||
Details are placed in drawers, and using <code>Renderer.Component.DrawerTitle</code> provides a separator from details above this one.
|
||||
Multiple details in a drawer can be placed in <code><Renderer.Component.DrawerItem></code> elements for further separation, if desired.
|
||||
The rest of this example's details are defined in <code>PodsDetailsList</code>, found in <code>./pods-details-list.tsx</code>:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">const</span> <span class="p">{</span>
|
||||
<span class="nx">Component</span><span class="o">:</span> <span class="p">{</span>
|
||||
@@ -1632,14 +1632,14 @@ The rest of this example's details are defined in <code>PodsDetailsList</code>,
|
||||
<span class="p">},</span>
|
||||
<span class="p">}</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">type</span> <span class="nx">Pod</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">K8sApi</span><span class="p">.</span><span class="nx">Pod</span><span class="p">;</span>
|
||||
<span class="kr">type</span> <span class="nx">Pod</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">K8sApi</span><span class="p">.</span><span class="nx">Pod</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">interface</span> <span class="nx">Props</span> <span class="p">{</span>
|
||||
<span class="nx">pods?</span>: <span class="kt">Pod</span><span class="p">[];</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">export</span> <span class="kd">class</span> <span class="nx">PodsDetailsList</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="o"><</span><span class="nx">Props</span><span class="o">></span> <span class="p">{</span>
|
||||
<span class="nx">getTableRow</span> <span class="o">=</span> <span class="p">(</span><span class="nx">pod</span>: <span class="kt">Pod</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
|
||||
<span class="nx">getTableRow</span> <span class="o">=</span> <span class="p">(</span><span class="nx">pod</span>: <span class="kt">Pod</span><span class="p">)</span> <span class="p">=></span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">TableRow</span> <span class="nx">key</span><span class="o">=</span><span class="p">{</span><span class="nx">index</span><span class="p">}</span> <span class="nx">nowrap</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">TableCell</span> <span class="nx">className</span><span class="o">=</span><span class="s2">"podName"</span><span class="o">></span><span class="p">{</span><span class="nx">pods</span><span class="p">[</span><span class="nx">index</span><span class="p">].</span><span class="nx">getName</span><span class="p">()}</span><span class="o"><</span><span class="err">/TableCell></span>
|
||||
|
||||
@@ -737,8 +737,8 @@ It could be applied automatically to a cluster by the extension, or the end-user
|
||||
</code></pre></div>
|
||||
<p>It is simply a pod named <code>example-pod</code>, running nginx. Assume this content is in the file <code>../resources/example-pod.yml</code>.</p>
|
||||
<p>The following code sample shows how to use the <code>Renderer.K8sApi.ResourceStack</code> to manage installing and uninstalling this resource stack:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span><span class="p">,</span> <span class="nx">Common</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">path</span> <span class="k">from</span> <span class="s2">"path"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span><span class="p">,</span> <span class="nx">Common</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">path</span> <span class="kr">from</span> <span class="s2">"path"</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">const</span> <span class="p">{</span>
|
||||
<span class="nx">K8sApi</span><span class="o">:</span> <span class="p">{</span>
|
||||
@@ -748,27 +748,27 @@ It could be applied automatically to a cluster by the extension, or the end-user
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">type</span> <span class="nx">ResourceStack</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">K8sApi</span><span class="p">.</span><span class="nx">ResourceStack</span><span class="p">;</span>
|
||||
<span class="kd">type</span> <span class="nx">Pod</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">K8sApi</span><span class="p">.</span><span class="nx">Pod</span><span class="p">;</span>
|
||||
<span class="kd">type</span> <span class="nx">KubernetesCluster</span> <span class="o">=</span> <span class="nx">Common</span><span class="p">.</span><span class="nx">Catalog</span><span class="p">.</span><span class="nx">KubernetesCluster</span><span class="p">;</span>
|
||||
<span class="kr">type</span> <span class="nx">ResourceStack</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">K8sApi</span><span class="p">.</span><span class="nx">ResourceStack</span><span class="p">;</span>
|
||||
<span class="kr">type</span> <span class="nx">Pod</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">K8sApi</span><span class="p">.</span><span class="nx">Pod</span><span class="p">;</span>
|
||||
<span class="kr">type</span> <span class="nx">KubernetesCluster</span> <span class="o">=</span> <span class="nx">Common</span><span class="p">.</span><span class="nx">Catalog</span><span class="p">.</span><span class="nx">KubernetesCluster</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span> <span class="kd">class</span> <span class="nx">ExampleClusterFeature</span> <span class="p">{</span>
|
||||
<span class="k">protected</span> <span class="nx">stack</span>: <span class="kt">ResourceStack</span><span class="p">;</span>
|
||||
|
||||
<span class="kr">constructor</span><span class="p">(</span><span class="k">protected</span> <span class="nx">cluster</span>: <span class="kt">KubernetesCluster</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">stack</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">ResourceStack</span><span class="p">(</span><span class="nx">cluster</span><span class="p">,</span> <span class="s2">"example-resource-stack"</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">stack</span> <span class="o">=</span> <span class="ow">new</span> <span class="nx">ResourceStack</span><span class="p">(</span><span class="nx">cluster</span><span class="p">,</span> <span class="s2">"example-resource-stack"</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nx">get</span> <span class="nx">resourceFolder</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="nx">path</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="nx">__dirname</span><span class="p">,</span> <span class="s2">"../resources/"</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nx">install</span><span class="p">()</span><span class="o">:</span> <span class="nx">Promise</span><span class="o"><</span><span class="kt">string</span><span class="o">></span> <span class="p">{</span>
|
||||
<span class="nx">install</span><span class="p">()</span><span class="o">:</span> <span class="nb">Promise</span><span class="o"><</span><span class="kt">string</span><span class="o">></span> <span class="p">{</span>
|
||||
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"installing example-pod"</span><span class="p">);</span>
|
||||
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">stack</span><span class="p">.</span><span class="nx">kubectlApplyFolder</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">resourceFolder</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">async</span> <span class="nx">isInstalled</span><span class="p">()</span><span class="o">:</span> <span class="nx">Promise</span><span class="o"><</span><span class="kr">boolean</span><span class="o">></span> <span class="p">{</span>
|
||||
<span class="k">async</span> <span class="nx">isInstalled</span><span class="p">()</span><span class="o">:</span> <span class="nb">Promise</span><span class="o"><</span><span class="kt">boolean</span><span class="o">></span> <span class="p">{</span>
|
||||
<span class="k">try</span> <span class="p">{</span>
|
||||
<span class="kd">const</span> <span class="nx">podApi</span> <span class="o">=</span> <span class="nx">forCluster</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">cluster</span><span class="p">,</span> <span class="nx">Pod</span><span class="p">);</span>
|
||||
<span class="kd">const</span> <span class="nx">examplePod</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">podApi</span><span class="p">.</span><span class="nx">get</span><span class="p">({</span><span class="nx">name</span><span class="o">:</span> <span class="s2">"example-pod"</span><span class="p">,</span> <span class="nx">namespace</span><span class="o">:</span> <span class="s2">"default"</span><span class="p">});</span>
|
||||
@@ -785,7 +785,7 @@ It could be applied automatically to a cluster by the extension, or the end-user
|
||||
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">async</span> <span class="nx">uninstall</span><span class="p">()</span><span class="o">:</span> <span class="nx">Promise</span><span class="o"><</span><span class="kt">string</span><span class="o">></span> <span class="p">{</span>
|
||||
<span class="k">async</span> <span class="nx">uninstall</span><span class="p">()</span><span class="o">:</span> <span class="nb">Promise</span><span class="o"><</span><span class="kt">string</span><span class="o">></span> <span class="p">{</span>
|
||||
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"uninstalling example-pod"</span><span class="p">);</span>
|
||||
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">stack</span><span class="p">.</span><span class="nx">kubectlDeleteFolder</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">resourceFolder</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
@@ -801,11 +801,11 @@ Similarly, <code>ExampleClusterFeature</code> implements an <code>uninstall()</c
|
||||
<code>isInstalled()</code> simply tries to find a pod named <code>example-pod</code>, as a way to determine if the pod is already installed.
|
||||
This method can be useful in creating a context-sensitive UI for installing/uninstalling the feature, as demonstrated in the next sample code.</p>
|
||||
<p>To allow the end-user to control the life cycle of this cluster feature the following code sample shows how to implement a user interface based on React and custom Lens UI components:</p>
|
||||
<div class="highlight"><pre><span></span><code> <span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Common</span><span class="p">,</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">observer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"mobx-react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">computed</span><span class="p">,</span> <span class="nx">observable</span><span class="p">,</span> <span class="nx">makeObservable</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"mobx"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExampleClusterFeature</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"./example-cluster-feature"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code> <span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Common</span><span class="p">,</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">observer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"mobx-react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">computed</span><span class="p">,</span> <span class="nx">observable</span><span class="p">,</span> <span class="nx">makeObservable</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"mobx"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExampleClusterFeature</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"./example-cluster-feature"</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">const</span> <span class="p">{</span>
|
||||
<span class="nx">Component</span><span class="o">:</span> <span class="p">{</span>
|
||||
@@ -830,7 +830,7 @@ This method can be useful in creating a context-sensitive UI for installing/unin
|
||||
<span class="nx">feature</span>: <span class="kt">ExampleClusterFeature</span><span class="p">;</span>
|
||||
|
||||
<span class="k">async</span> <span class="nx">componentDidMount</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">feature</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">ExampleClusterFeature</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">cluster</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">feature</span> <span class="o">=</span> <span class="ow">new</span> <span class="nx">ExampleClusterFeature</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">cluster</span><span class="p">);</span>
|
||||
|
||||
<span class="k">await</span> <span class="k">this</span><span class="p">.</span><span class="nx">updateFeatureState</span><span class="p">();</span>
|
||||
<span class="p">}</span>
|
||||
@@ -874,7 +874,7 @@ This method can be useful in creating a context-sensitive UI for installing/unin
|
||||
<span class="o"><</span><span class="nx">Button</span>
|
||||
<span class="nx">label</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">buttonLabel</span><span class="p">}</span>
|
||||
<span class="nx">waiting</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">inProgress</span><span class="p">}</span>
|
||||
<span class="nx">onClick</span><span class="o">=</span><span class="p">{()</span> <span class="o">=></span> <span class="k">this</span><span class="p">.</span><span class="nx">save</span><span class="p">()}</span>
|
||||
<span class="nx">onClick</span><span class="o">=</span><span class="p">{()</span> <span class="p">=></span> <span class="k">this</span><span class="p">.</span><span class="nx">save</span><span class="p">()}</span>
|
||||
<span class="nx">primary</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="err">/section></span>
|
||||
<span class="o"><</span><span class="err">/></span>
|
||||
@@ -894,9 +894,9 @@ The <code>ExampleClusterFeatureSettings</code> class is marked as an <code>@obse
|
||||
As well, the <code>installed</code> and <code>inProgress</code> fields are marked as <code>@observable</code>, ensuring that the button gets rerendered any time these fields change.</p>
|
||||
<p>Finally, <code>ExampleClusterFeatureSettings</code> needs to be connected to the extension, and would typically appear on the cluster <strong>Settings</strong> page via a <code>Renderer.LensExtension.entitySettings</code> entry.
|
||||
The <code>ExampleExtension</code> would look like this:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Common</span><span class="p">,</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExampleClusterFeatureSettings</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"./src/example-cluster-feature-settings"</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Common</span><span class="p">,</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExampleClusterFeatureSettings</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"./src/example-cluster-feature-settings"</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span>
|
||||
|
||||
<span class="k">export</span> <span class="k">default</span> <span class="kd">class</span> <span class="nx">ExampleExtension</span> <span class="k">extends</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span> <span class="p">{</span>
|
||||
<span class="nx">entitySettings</span> <span class="o">=</span> <span class="p">[</span>
|
||||
@@ -906,7 +906,7 @@ The <code>ExampleExtension</code> would look like this:</p>
|
||||
<span class="nx">title</span><span class="o">:</span> <span class="s2">"Example Cluster Feature"</span><span class="p">,</span>
|
||||
<span class="nx">priority</span>: <span class="kt">5</span><span class="p">,</span>
|
||||
<span class="nx">components</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">View</span><span class="o">:</span> <span class="p">({</span> <span class="nx">entity</span> <span class="o">=</span> <span class="kc">null</span> <span class="p">}</span><span class="o">:</span> <span class="p">{</span> <span class="nx">entity</span>: <span class="kt">Common.Catalog.KubernetesCluster</span><span class="p">})</span> <span class="o">=></span> <span class="p">{</span>
|
||||
<span class="nx">View</span><span class="o">:</span> <span class="p">({</span> <span class="nx">entity</span> <span class="o">=</span> <span class="kc">null</span> <span class="p">}</span><span class="o">:</span> <span class="p">{</span> <span class="nx">entity</span>: <span class="kt">Common.Catalog.KubernetesCluster</span><span class="p">})</span> <span class="p">=></span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">ExampleClusterFeatureSettings</span> <span class="nx">cluster</span><span class="o">=</span><span class="p">{</span><span class="nx">entity</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="p">);</span>
|
||||
|
||||
@@ -779,10 +779,10 @@ It is also recommenced to delete the instance, using the inherited static method
|
||||
Everywhere else in your code you should use the <code>getInstance()</code> static method.
|
||||
This is so that your data is kept up to date and not persisted longer than expected.</p>
|
||||
<p>The following example code creates a store for the <code>appPreferences</code> guide example:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Common</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">observable</span><span class="p">,</span> <span class="nx">makeObservable</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"mobx"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Common</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">observable</span><span class="p">,</span> <span class="nx">makeObservable</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"mobx"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span> <span class="kd">type</span> <span class="nx">ExamplePreferencesModel</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="k">export</span> <span class="kr">type</span> <span class="nx">ExamplePreferencesModel</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="nx">enabled</span>: <span class="kt">boolean</span><span class="p">;</span>
|
||||
<span class="p">};</span>
|
||||
|
||||
@@ -800,7 +800,7 @@ This is so that your data is kept up to date and not persisted longer than expec
|
||||
<span class="nx">makeObservable</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">protected</span> <span class="nx">fromStore</span><span class="p">({</span> <span class="nx">enabled</span> <span class="p">}</span><span class="o">:</span> <span class="nx">ExamplePreferencesModel</span><span class="p">)</span><span class="o">:</span> <span class="k">void</span> <span class="p">{</span>
|
||||
<span class="k">protected</span> <span class="nx">fromStore</span><span class="p">({</span> <span class="nx">enabled</span> <span class="p">}</span><span class="o">:</span> <span class="nx">ExamplePreferencesModel</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">enabled</span> <span class="o">=</span> <span class="nx">enabled</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@@ -835,8 +835,8 @@ Thus it prevents an instance from being created when the constructor args are no
|
||||
<p>The following example code, modified from the <a href="../renderer-extension#apppreferences"><code>appPreferences</code></a> guide demonstrates how to use the extension store.
|
||||
<code>ExamplePreferencesStore</code> must be loaded in the main process, where loaded stores are automatically saved when exiting Lens.
|
||||
This can be done in <code>./main.ts</code>:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Main</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExamplePreferencesStore</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"./src/example-preference-store"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Main</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExamplePreferencesStore</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"./src/example-preference-store"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span> <span class="k">default</span> <span class="kd">class</span> <span class="nx">ExampleMainExtension</span> <span class="k">extends</span> <span class="nx">Main</span><span class="p">.</span><span class="nx">LensExtension</span> <span class="p">{</span>
|
||||
<span class="k">async</span> <span class="nx">onActivate</span><span class="p">()</span> <span class="p">{</span>
|
||||
@@ -847,10 +847,10 @@ This can be done in <code>./main.ts</code>:</p>
|
||||
<p>Here, <code>ExamplePreferencesStore</code> loads with <code>ExamplePreferencesStore.getInstanceOrCreate().loadExtension(this)</code>, which is conveniently called from the <code>onActivate()</code> method of <code>ExampleMainExtension</code>.
|
||||
Similarly, <code>ExamplePreferencesStore</code> must load in the renderer process where the <code>appPreferences</code> are handled.
|
||||
This can be done in <code>./renderer.ts</code>:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExamplePreferenceHint</span><span class="p">,</span> <span class="nx">ExamplePreferenceInput</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"./src/example-preference"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExamplePreferencesStore</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"./src/example-preference-store"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExamplePreferenceHint</span><span class="p">,</span> <span class="nx">ExamplePreferenceInput</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"./src/example-preference"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExamplePreferencesStore</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"./src/example-preference-store"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span> <span class="k">default</span> <span class="kd">class</span> <span class="nx">ExampleRendererExtension</span> <span class="k">extends</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span> <span class="p">{</span>
|
||||
|
||||
@@ -862,8 +862,8 @@ This can be done in <code>./renderer.ts</code>:</p>
|
||||
<span class="p">{</span>
|
||||
<span class="nx">title</span><span class="o">:</span> <span class="s2">"Example Preferences"</span><span class="p">,</span>
|
||||
<span class="nx">components</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">Input</span><span class="o">:</span> <span class="p">()</span> <span class="o">=></span> <span class="o"><</span><span class="nx">ExamplePreferenceInput</span> <span class="o">/></span><span class="p">,</span>
|
||||
<span class="nx">Hint</span><span class="o">:</span> <span class="p">()</span> <span class="o">=></span> <span class="o"><</span><span class="nx">ExamplePreferenceHint</span><span class="o">/></span>
|
||||
<span class="nx">Input</span><span class="o">:</span> <span class="p">()</span> <span class="p">=></span> <span class="o"><</span><span class="nx">ExamplePreferenceInput</span> <span class="o">/></span><span class="p">,</span>
|
||||
<span class="nx">Hint</span><span class="o">:</span> <span class="p">()</span> <span class="p">=></span> <span class="o"><</span><span class="nx">ExamplePreferenceHint</span><span class="o">/></span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">];</span>
|
||||
@@ -871,10 +871,10 @@ This can be done in <code>./renderer.ts</code>:</p>
|
||||
</code></pre></div>
|
||||
<p>Again, <code>ExamplePreferencesStore.getInstanceOrCreate().loadExtension(this)</code> is called to load <code>ExamplePreferencesStore</code>, this time from the <code>onActivate()</code> method of <code>ExampleRendererExtension</code>.</p>
|
||||
<p><code>ExamplePreferenceInput</code> is defined in <code>./src/example-preference.tsx</code>:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">observer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"mobx-react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExamplePreferencesStore</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"./example-preference-store"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">observer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"mobx-react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExamplePreferencesStore</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"./example-preference-store"</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">const</span> <span class="p">{</span>
|
||||
<span class="nx">Component</span><span class="o">:</span> <span class="p">{</span>
|
||||
@@ -890,7 +890,7 @@ This can be done in <code>./renderer.ts</code>:</p>
|
||||
<span class="o"><</span><span class="nx">Checkbox</span>
|
||||
<span class="nx">label</span><span class="o">=</span><span class="s2">"I understand appPreferences"</span>
|
||||
<span class="nx">value</span><span class="o">=</span><span class="p">{</span><span class="nx">ExamplePreferencesStore</span><span class="p">.</span><span class="nx">getInstance</span><span class="p">().</span><span class="nx">enabled</span><span class="p">}</span>
|
||||
<span class="nx">onChange</span><span class="o">=</span><span class="p">{</span><span class="nx">v</span> <span class="o">=></span> <span class="p">{</span> <span class="nx">ExamplePreferencesStore</span><span class="p">.</span><span class="nx">getInstance</span><span class="p">().</span><span class="nx">enabled</span> <span class="o">=</span> <span class="nx">v</span><span class="p">;</span> <span class="p">}}</span>
|
||||
<span class="nx">onChange</span><span class="o">=</span><span class="p">{</span><span class="nx">v</span> <span class="p">=></span> <span class="p">{</span> <span class="nx">ExamplePreferencesStore</span><span class="p">.</span><span class="nx">getInstance</span><span class="p">().</span><span class="nx">enabled</span> <span class="o">=</span> <span class="nx">v</span><span class="p">;</span> <span class="p">}}</span>
|
||||
<span class="o">/></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
Reference in new issue
Block a user