mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Deployed 2363b390c9 to master with MkDocs 1.4.2 and mike 1.1.2
This commit is contained in:
GitHub Action committed
1 parent
cbc5266a16
commit
a341140e98
35 files changed
+1808
-1808
No files matched your search
@@ -835,26 +835,26 @@ It declares the currently supported versions of that kind of entity but providin
|
||||
It is possible to register custom views for specific categories by registering them on your <code>Renderer.LensExtension</code> class.</p>
|
||||
<p>A registration takes the form of a <a href="../../api/interfaces/Common.Types.CustomCategoryViewRegistration/">Common.Types.CustomCategoryViewRegistration</a></p>
|
||||
<p>For example:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">,</span><span class="w"> </span><span class="nx">Common</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">,</span><span class="w"> </span><span class="nx">Common</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">function</span><span class="w"> </span><span class="nx">MyKubernetesClusterView</span><span class="p">({</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">category</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="o">:</span><span class="w"> </span><span class="nx">Common</span><span class="p">.</span><span class="nx">Types</span><span class="p">.</span><span class="nx">CustomCategoryViewProps</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="o"><</span><span class="nx">div</span><span class="o">></span><span class="nx">My</span><span class="w"> </span><span class="nx">view</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="nx">category</span><span class="p">.</span><span class="nx">getId</span><span class="p">()}</span><span class="o"><</span><span class="err">/div>;</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="kd">function</span><span class="w"> </span><span class="nx">MyKubernetesClusterView</span><span class="p">({</span>
|
||||
<span class="w"> </span><span class="nx">category</span><span class="p">,</span>
|
||||
<span class="p">}</span><span class="o">:</span><span class="w"> </span><span class="nx">Common</span><span class="p">.</span><span class="nx">Types</span><span class="p">.</span><span class="nx">CustomCategoryViewProps</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="o"><</span><span class="nx">div</span><span class="o">></span><span class="nx">My</span><span class="w"> </span><span class="nx">view</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="nx">category</span><span class="p">.</span><span class="nx">getId</span><span class="p">()}</span><span class="o"><</span><span class="err">/div>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">customCategoryViews</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">group</span><span class="o">:</span><span class="w"> </span><span class="s2">"entity.k8slens.dev"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">kind</span><span class="o">:</span><span class="w"> </span><span class="s2">"KubernetesCluster"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">priority</span><span class="o">:</span><span class="w"> </span><span class="kt">10</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">components</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">View</span><span class="o">:</span><span class="w"> </span><span class="kt">MyKubernetesClusterView</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">];</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">customCategoryViews</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span>
|
||||
<span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">group</span><span class="o">:</span><span class="w"> </span><span class="s2">"entity.k8slens.dev"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">kind</span><span class="o">:</span><span class="w"> </span><span class="s2">"KubernetesCluster"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">priority</span><span class="o">:</span><span class="w"> </span><span class="kt">10</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">components</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">View</span><span class="o">:</span><span class="w"> </span><span class="kt">MyKubernetesClusterView</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="p">];</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>Will register a new view for the KubernetesCluster category, and because the priority is < 50 it will be displayed above the default list view.</p>
|
||||
<p>The default list view has a priority of 50 and and custom views with priority (defaulting to 50) >= 50 will be displayed afterwards.</p>
|
||||
|
||||
@@ -791,55 +791,55 @@
|
||||
<h1 id="extending-kubernetescluster">Extending KubernetesCluster<a class="headerlink" href="#extending-kubernetescluster" title="Permanent link">#</a></h1>
|
||||
<p>Extension can specify it's own subclass of Common.Catalog.KubernetesCluster. Extension can also specify a new Category for it in the Catalog.</p>
|
||||
<h2 id="extending-commoncatalogkubernetescluster">Extending Common.Catalog.KubernetesCluster<a class="headerlink" href="#extending-commoncatalogkubernetescluster" title="Permanent link">#</a></h2>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Common</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Common</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
|
||||
<span class="c1">// The kind must be different from KubernetesCluster's kind</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">kind</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"ManagedDevCluster"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="c1">// The kind must be different from KubernetesCluster's kind</span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">kind</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"ManagedDevCluster"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ManagedDevCluster</span><span class="w"> </span><span class="k">extends</span><span class="w"> </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="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">public</span><span class="w"> </span><span class="k">static</span><span class="w"> </span><span class="k">readonly</span><span class="w"> </span><span class="nx">kind</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">kind</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ManagedDevCluster</span><span class="w"> </span><span class="k">extends</span><span class="w"> </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="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="k">public</span><span class="w"> </span><span class="k">static</span><span class="w"> </span><span class="k">readonly</span><span class="w"> </span><span class="nx">kind</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">kind</span><span class="p">;</span>
|
||||
|
||||
<span class="w"> </span><span class="k">public</span><span class="w"> </span><span class="k">readonly</span><span class="w"> </span><span class="nx">kind</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">kind</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">public</span><span class="w"> </span><span class="k">readonly</span><span class="w"> </span><span class="nx">kind</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">kind</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<h2 id="extending-commoncatalogcatalogcategory">Extending Common.Catalog.CatalogCategory<a class="headerlink" href="#extending-commoncatalogcatalogcategory" title="Permanent link">#</a></h2>
|
||||
<p>These custom Catalog entities can be added a new Category in the Catalog.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Common</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">kind</span><span class="p">,</span><span class="w"> </span><span class="nx">ManagedDevCluster</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"../entities/ManagedDevCluster"</span><span class="p">;</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Common</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">kind</span><span class="p">,</span><span class="w"> </span><span class="nx">ManagedDevCluster</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"../entities/ManagedDevCluster"</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">class</span><span class="w"> </span><span class="nx">ManagedDevClusterCategory</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Common</span><span class="p">.</span><span class="nx">Catalog</span><span class="p">.</span><span class="nx">CatalogCategory</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">public</span><span class="w"> </span><span class="k">readonly</span><span class="w"> </span><span class="nx">apiVersion</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"catalog.k8slens.dev/v1alpha1"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">public</span><span class="w"> </span><span class="k">readonly</span><span class="w"> </span><span class="nx">kind</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"CatalogCategory"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">public</span><span class="w"> </span><span class="nx">metadata</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">name</span><span class="o">:</span><span class="w"> </span><span class="s2">"Managed Dev Clusters"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">icon</span><span class="o">:</span><span class="w"> </span><span class="s2">""</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">};</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">public</span><span class="w"> </span><span class="nx">spec</span><span class="o">:</span><span class="w"> </span><span class="kt">Common.Catalog.CatalogCategorySpec</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">group</span><span class="o">:</span><span class="w"> </span><span class="s2">"entity.k8slens.dev"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">versions</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">name</span><span class="o">:</span><span class="w"> </span><span class="s2">"v1alpha1"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">entityClass</span><span class="o">:</span><span class="w"> </span><span class="kt">ManagedDevCluster</span><span class="w"> </span><span class="kr">as</span><span class="w"> </span><span class="nx">any</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">],</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">names</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">kind</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">};</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="kd">class</span><span class="w"> </span><span class="nx">ManagedDevClusterCategory</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Common</span><span class="p">.</span><span class="nx">Catalog</span><span class="p">.</span><span class="nx">CatalogCategory</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="k">public</span><span class="w"> </span><span class="k">readonly</span><span class="w"> </span><span class="nx">apiVersion</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"catalog.k8slens.dev/v1alpha1"</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="k">public</span><span class="w"> </span><span class="k">readonly</span><span class="w"> </span><span class="nx">kind</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"CatalogCategory"</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="k">public</span><span class="w"> </span><span class="nx">metadata</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">name</span><span class="o">:</span><span class="w"> </span><span class="s2">"Managed Dev Clusters"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">icon</span><span class="o">:</span><span class="w"> </span><span class="s2">""</span>
|
||||
<span class="w"> </span><span class="p">};</span>
|
||||
<span class="w"> </span><span class="k">public</span><span class="w"> </span><span class="nx">spec</span><span class="o">:</span><span class="w"> </span><span class="kt">Common.Catalog.CatalogCategorySpec</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">group</span><span class="o">:</span><span class="w"> </span><span class="s2">"entity.k8slens.dev"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">versions</span><span class="o">:</span><span class="w"> </span><span class="p">[</span>
|
||||
<span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">name</span><span class="o">:</span><span class="w"> </span><span class="s2">"v1alpha1"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">entityClass</span><span class="o">:</span><span class="w"> </span><span class="kt">ManagedDevCluster</span><span class="w"> </span><span class="kr">as</span><span class="w"> </span><span class="nx">any</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="p">],</span>
|
||||
<span class="w"> </span><span class="nx">names</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">kind</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="p">};</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">export</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">ManagedDevClusterCategory</span><span class="w"> </span><span class="p">};</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="kr">type</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">ManagedDevClusterCategory</span><span class="w"> </span><span class="kr">as</span><span class="w"> </span><span class="nx">ManagedDevClusterCategoryType</span><span class="w"> </span><span class="p">};</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">ManagedDevClusterCategory</span><span class="w"> </span><span class="p">};</span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="kr">type</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">ManagedDevClusterCategory</span><span class="w"> </span><span class="kr">as</span><span class="w"> </span><span class="nx">ManagedDevClusterCategoryType</span><span class="w"> </span><span class="p">};</span>
|
||||
</code></pre></div>
|
||||
<p>The category needs to be registered in the <code>onActivate()</code> method both in main and renderer</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="c1">// in main's on onActivate</span><span class="w"></span>
|
||||
<span class="nx">Main</span><span class="p">.</span><span class="nx">Catalog</span><span class="p">.</span><span class="nx">catalogCategories</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="ow">new</span><span class="w"> </span><span class="nx">ManagedDevClusterCategory</span><span class="p">());</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="c1">// in main's on onActivate</span>
|
||||
<span class="nx">Main</span><span class="p">.</span><span class="nx">Catalog</span><span class="p">.</span><span class="nx">catalogCategories</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="ow">new</span><span class="w"> </span><span class="nx">ManagedDevClusterCategory</span><span class="p">());</span>
|
||||
</code></pre></div>
|
||||
<div class="highlight"><pre><span></span><code><span class="c1">// in renderer's on onActivate</span><span class="w"></span>
|
||||
<span class="nx">Renderer</span><span class="p">.</span><span class="nx">Catalog</span><span class="p">.</span><span class="nx">catalogCategories</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="ow">new</span><span class="w"> </span><span class="nx">ManagedDevClusterCategory</span><span class="p">());</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="c1">// in renderer's on onActivate</span>
|
||||
<span class="nx">Renderer</span><span class="p">.</span><span class="nx">Catalog</span><span class="p">.</span><span class="nx">catalogCategories</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="ow">new</span><span class="w"> </span><span class="nx">ManagedDevClusterCategory</span><span class="p">());</span>
|
||||
</code></pre></div>
|
||||
<p>You can then add the entities to the Catalog as a new source:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">this</span><span class="p">.</span><span class="nx">addCatalogSource</span><span class="p">(</span><span class="s2">"managedDevClusters"</span><span class="p">,</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">managedDevClusters</span><span class="p">);</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">this</span><span class="p">.</span><span class="nx">addCatalogSource</span><span class="p">(</span><span class="s2">"managedDevClusters"</span><span class="p">,</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">managedDevClusters</span><span class="p">);</span>
|
||||
</code></pre></div>
|
||||
|
||||
|
||||
|
||||
@@ -820,7 +820,7 @@
|
||||
<p>The <a href="https://github.com/lensapp/generator-lens-ext">Lens Extension Generator</a> creates a directory with the necessary files for developing an extension.</p>
|
||||
<h2 id="installing-and-getting-started-with-the-generator">Installing and Getting Started with the Generator<a class="headerlink" href="#installing-and-getting-started-with-the-generator" title="Permanent link">#</a></h2>
|
||||
<p>To begin, install Yeoman and the Lens Extension Generator with the following command:</p>
|
||||
<div class="highlight"><pre><span></span><code>npm install -g yo generator-lens-ext
|
||||
<div class="highlight"><pre><span></span><code>npm<span class="w"> </span>install<span class="w"> </span>-g<span class="w"> </span>yo<span class="w"> </span>generator-lens-ext
|
||||
</code></pre></div>
|
||||
<p>Run the generator by entering the following command: <code>yo lens-ext</code>.</p>
|
||||
<p>Answer the following questions:</p>
|
||||
@@ -835,8 +835,8 @@
|
||||
</code></pre></div>
|
||||
<p>Next, you'll need to have webpack watch the <code>my-first-lens-ext</code> folder.
|
||||
Start webpack by entering:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="nb">cd</span> my-first-lens-ext
|
||||
npm start <span class="c1"># start the webpack server in watch mode</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="nb">cd</span><span class="w"> </span>my-first-lens-ext
|
||||
npm<span class="w"> </span>start<span class="w"> </span><span class="c1"># start the webpack server in watch mode</span>
|
||||
</code></pre></div>
|
||||
<p>Open Lens and you will see a <strong>Hello World</strong> item in the left-side menu under <strong>Custom Resources</strong>:</p>
|
||||
<p><img alt="Hello World" src="../images/hello-world.png" /></p>
|
||||
@@ -844,15 +844,15 @@ npm start <span class="c1"># start the webpack server in watch mode</span>
|
||||
<p>Next, you'll try changing the way the new menu item appears in the UI.
|
||||
You'll change it from "Hello World" to "Hello Lens".</p>
|
||||
<p>Open <code>my-first-lens-ext/renderer.tsx</code> and change the value of <code>title</code> from <code>"Hello World"</code> to <code>"Hello Lens"</code>:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="nx">clusterPageMenus</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">target</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">pageId</span><span class="o">:</span><span class="w"> </span><span class="s2">"hello"</span><span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s2">"Hello Lens"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">components</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">Icon</span><span class="o">:</span><span class="w"> </span><span class="kt">ExampleIcon</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="p">];</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="nx">clusterPageMenus</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span>
|
||||
<span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">target</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">pageId</span><span class="o">:</span><span class="w"> </span><span class="s2">"hello"</span><span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s2">"Hello Lens"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">components</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">Icon</span><span class="o">:</span><span class="w"> </span><span class="kt">ExampleIcon</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="p">];</span>
|
||||
</code></pre></div>
|
||||
<p>Reload Lens and you will see that the menu item text has changed to "Hello Lens".
|
||||
To reload Lens, enter <code>CMD+R</code> on Mac and <code>Ctrl+R</code> on Windows/Linux.</p>
|
||||
|
||||
@@ -899,54 +899,54 @@ 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="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Main</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">IpcMain</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"./helpers/main"</span><span class="p">;</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Main</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">IpcMain</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"./helpers/main"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExampleExtensionMain</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Main</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">onActivate</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">IpcMain</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="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExampleExtensionMain</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Main</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">onActivate</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">IpcMain</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="w"> </span><span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div></p>
|
||||
<p>This file shows that you need to create an instance of the store to be able to use IPC.
|
||||
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="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Main</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Main</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">IpcMain</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Main</span><span class="p">.</span><span class="nx">Ipc</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="kr">constructor</span><span class="p">(</span><span class="nx">extension</span><span class="o">:</span><span class="w"> </span><span class="kt">Main.LensExtension</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">super</span><span class="p">(</span><span class="nx">extension</span><span class="p">);</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">IpcMain</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Main</span><span class="p">.</span><span class="nx">Ipc</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="kr">constructor</span><span class="p">(</span><span class="nx">extension</span><span class="o">:</span><span class="w"> </span><span class="kt">Main.LensExtension</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="k">super</span><span class="p">(</span><span class="nx">extension</span><span class="p">);</span>
|
||||
|
||||
<span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">listen</span><span class="p">(</span><span class="s2">"initialize"</span><span class="p">,</span><span class="w"> </span><span class="nx">onInitialize</span><span class="p">);</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">listen</span><span class="p">(</span><span class="s2">"initialize"</span><span class="p">,</span><span class="w"> </span><span class="nx">onInitialize</span><span class="p">);</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="kd">function</span><span class="w"> </span><span class="nx">onInitialize</span><span class="p">(</span><span class="nx">event</span><span class="o">:</span><span class="w"> </span><span class="kt">Types.IpcMainEvent</span><span class="p">,</span><span class="w"> </span><span class="nx">id</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sb">`starting to initialize: </span><span class="si">${</span><span class="nx">id</span><span class="si">}</span><span class="sb">`</span><span class="p">);</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="kd">function</span><span class="w"> </span><span class="nx">onInitialize</span><span class="p">(</span><span class="nx">event</span><span class="o">:</span><span class="w"> </span><span class="kt">Types.IpcMainEvent</span><span class="p">,</span><span class="w"> </span><span class="nx">id</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sb">`starting to initialize: </span><span class="si">${</span><span class="nx">id</span><span class="si">}</span><span class="sb">`</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div></p>
|
||||
<p>In other files, it is not necessary to pass around any instances.
|
||||
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="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">IpcRenderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"./helpers/renderer"</span><span class="p">;</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">IpcRenderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"./helpers/renderer"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExampleExtensionRenderer</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">onActivate</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">ipc</span><span class="w"> </span><span class="o">=</span><span class="w"> </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="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExampleExtensionRenderer</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">onActivate</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">ipc</span><span class="w"> </span><span class="o">=</span><span class="w"> </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="w"> </span><span class="nx">setTimeout</span><span class="p">(()</span><span class="w"> </span><span class="p">=></span><span class="w"> </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="w"> </span><span class="s2">"an-id"</span><span class="p">),</span><span class="w"> </span><span class="mf">5000</span><span class="p">);</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">setTimeout</span><span class="p">(()</span><span class="w"> </span><span class="p">=></span><span class="w"> </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="w"> </span><span class="s2">"an-id"</span><span class="p">),</span><span class="w"> </span><span class="mf">5000</span><span class="p">);</span>
|
||||
<span class="w"> </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="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">IpcRenderer</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">.</span><span class="nx">Ipc</span><span class="w"> </span><span class="p">{}</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">IpcRenderer</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">.</span><span class="nx">Ipc</span><span class="w"> </span><span class="p">{}</span>
|
||||
</code></pre></div></p>
|
||||
<p>It is necessary to create child classes of these <code>abstract class</code>'s in your extension before you can use them.</p>
|
||||
<hr />
|
||||
|
||||
@@ -787,51 +787,51 @@ To achieve our goal, we need to:</p>
|
||||
<h2 id="register-clusterpage-and-clusterpagemenu-objects">Register <code>clusterPage</code> and <code>clusterPageMenu</code> Objects<a class="headerlink" href="#register-clusterpage-and-clusterpagemenu-objects" title="Permanent link">#</a></h2>
|
||||
<p>First thing we need to do with our extension is to register new menu item in the cluster menu and create a cluster page that is opened when clicking the menu item.
|
||||
We will do this in our extension class <code>CrdSampleExtension</code> that is derived <code>LensRendererExtension</code> class:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">CrdSampleExtension</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">CrdSampleExtension</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<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="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
|
||||
<span class="kr">type</span><span class="w"> </span><span class="nx">IconProps</span><span class="w"> </span><span class="o">=</span><span class="w"> </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="w"></span>
|
||||
<span class="kr">type</span><span class="w"> </span><span class="nx">IconProps</span><span class="w"> </span><span class="o">=</span><span class="w"> </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="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">Component</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">Icon</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">Component</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">Icon</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="nx">CertificateIcon</span><span class="p">(</span><span class="nx">props</span><span class="o">:</span><span class="w"> </span><span class="kt">IconProps</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="o"><</span><span class="nx">Icon</span><span class="w"> </span><span class="p">{...</span><span class="nx">props</span><span class="p">}</span><span class="w"> </span><span class="nx">material</span><span class="o">=</span><span class="s2">"security"</span><span class="w"> </span><span class="nx">tooltip</span><span class="o">=</span><span class="s2">"Certificates"</span><span class="o">/></span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="nx">CertificateIcon</span><span class="p">(</span><span class="nx">props</span><span class="o">:</span><span class="w"> </span><span class="kt">IconProps</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="o"><</span><span class="nx">Icon</span><span class="w"> </span><span class="p">{...</span><span class="nx">props</span><span class="p">}</span><span class="w"> </span><span class="nx">material</span><span class="o">=</span><span class="s2">"security"</span><span class="w"> </span><span class="nx">tooltip</span><span class="o">=</span><span class="s2">"Certificates"</span><span class="o">/></span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">CrdSampleExtension</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">CrdSampleExtension</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span>
|
||||
|
||||
<span class="w"> </span><span class="nx">clusterPageMenus</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">target</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">pageId</span><span class="o">:</span><span class="w"> </span><span class="s2">"certificates"</span><span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s2">"Certificates"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">components</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">Icon</span><span class="o">:</span><span class="w"> </span><span class="kt">CertificateIcon</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">]</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">clusterPageMenus</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span>
|
||||
<span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">target</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">pageId</span><span class="o">:</span><span class="w"> </span><span class="s2">"certificates"</span><span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s2">"Certificates"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">components</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">Icon</span><span class="o">:</span><span class="w"> </span><span class="kt">CertificateIcon</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="p">]</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>Then we need to register <code>PageRegistration</code> object with <code>certificates</code> id and define <code>CertificatePage</code> component to render certificates.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">CrdSampleExtension</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">...</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">CrdSampleExtension</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="p">...</span>
|
||||
|
||||
<span class="w"> </span><span class="nx">clusterPages</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">id</span><span class="o">:</span><span class="w"> </span><span class="s2">"certificates"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">components</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">Page</span><span class="o">:</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="o"><</span><span class="nx">CertificatePage</span><span class="w"> </span><span class="nx">extension</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">}</span><span class="w"> </span><span class="o">/></span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">MenuIcon</span><span class="o">:</span><span class="w"> </span><span class="kt">CertificateIcon</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}]</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">clusterPages</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[{</span>
|
||||
<span class="w"> </span><span class="nx">id</span><span class="o">:</span><span class="w"> </span><span class="s2">"certificates"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">components</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">Page</span><span class="o">:</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="o"><</span><span class="nx">CertificatePage</span><span class="w"> </span><span class="nx">extension</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">}</span><span class="w"> </span><span class="o">/></span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">MenuIcon</span><span class="o">:</span><span class="w"> </span><span class="kt">CertificateIcon</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="w"> </span><span class="p">}]</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<h2 id="list-certificate-objects-on-the-cluster-page">List Certificate Objects on the Cluster Page<a class="headerlink" href="#list-certificate-objects-on-the-cluster-page" title="Permanent link">#</a></h2>
|
||||
<p>In the previous step we defined <code>CertificatePage</code> component to render certificates.
|
||||
@@ -842,211 +842,211 @@ 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="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">K8sApi</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">KubeObject</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">KubeObjectStore</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">KubeApi</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">apiManager</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">K8sApi</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">KubeObject</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">KubeObjectStore</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">KubeApi</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">apiManager</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">Certificate</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">KubeObject</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">static</span><span class="w"> </span><span class="nx">kind</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"Certificate"</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">static</span><span class="w"> </span><span class="nx">namespaced</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">true</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">static</span><span class="w"> </span><span class="nx">apiBase</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"/apis/cert-manager.io/v1alpha2/certificates"</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">Certificate</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">KubeObject</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="k">static</span><span class="w"> </span><span class="nx">kind</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"Certificate"</span>
|
||||
<span class="w"> </span><span class="k">static</span><span class="w"> </span><span class="nx">namespaced</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">true</span>
|
||||
<span class="w"> </span><span class="k">static</span><span class="w"> </span><span class="nx">apiBase</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"/apis/cert-manager.io/v1alpha2/certificates"</span>
|
||||
|
||||
<span class="w"> </span><span class="nx">kind</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">apiVersion</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">metadata</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">name</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">namespace</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">selfLink</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">uid</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">resourceVersion</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">creationTimestamp</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">labels</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">[</span><span class="nx">key</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">]</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">};</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">annotations</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">[</span><span class="nx">key</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">]</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">};</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">spec</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">dnsNames</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">[];</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">issuerRef</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">group</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">kind</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">name</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">secretName</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">status</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">conditions</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">lastTransitionTime</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">message</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">reason</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">status</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="kr">type</span><span class="nx">?</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}[];</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">kind</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span>
|
||||
<span class="w"> </span><span class="nx">apiVersion</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span>
|
||||
<span class="w"> </span><span class="nx">metadata</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">name</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="nx">namespace</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="nx">selfLink</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="nx">uid</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="nx">resourceVersion</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="nx">creationTimestamp</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="nx">labels</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="p">[</span><span class="nx">key</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">]</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="p">};</span>
|
||||
<span class="w"> </span><span class="nx">annotations</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="p">[</span><span class="nx">key</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">]</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="p">};</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="w"> </span><span class="nx">spec</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">dnsNames</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">[];</span>
|
||||
<span class="w"> </span><span class="nx">issuerRef</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">group</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="nx">kind</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="nx">name</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="w"> </span><span class="nx">secretName</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="w"> </span><span class="nx">status</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">conditions</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">lastTransitionTime</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="nx">message</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="nx">reason</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="nx">status</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="kr">type</span><span class="nx">?</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="p">}[];</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>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="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">CertificatesApi</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">KubeApi</span><span class="o"><</span><span class="nx">Certificate</span><span class="o">></span><span class="w"> </span><span class="p">{}</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">CertificatesApi</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">KubeApi</span><span class="o"><</span><span class="nx">Certificate</span><span class="o">></span><span class="w"> </span><span class="p">{}</span>
|
||||
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">certificatesApi</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">CertificatesApi</span><span class="p">({</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">objectConstructor</span><span class="o">:</span><span class="w"> </span><span class="kt">Certificate</span><span class="w"></span>
|
||||
<span class="p">});</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">certificatesApi</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">CertificatesApi</span><span class="p">({</span>
|
||||
<span class="w"> </span><span class="nx">objectConstructor</span><span class="o">:</span><span class="w"> </span><span class="kt">Certificate</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p><code>CertificateStore</code> defines storage for <code>Certificate</code> objects</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">CertificatesStore</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">KubeObjectStore</span><span class="o"><</span><span class="nx">Certificate</span><span class="o">></span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">api</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">certificatesApi</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">CertificatesStore</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">KubeObjectStore</span><span class="o"><</span><span class="nx">Certificate</span><span class="o">></span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">api</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">certificatesApi</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">certificatesStore</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">CertificatesStore</span><span class="p">();</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">certificatesStore</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </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><span class="w"></span>
|
||||
<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>
|
||||
</code></pre></div>
|
||||
<h3 id="create-certificatepage-component">Create CertificatePage component<a class="headerlink" href="#create-certificatepage-component" title="Permanent link">#</a></h3>
|
||||
<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="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"react"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">certificatesStore</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"../certificate-store"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Certificate</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"../certificate"</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"react"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">certificatesStore</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"../certificate-store"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Certificate</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"../certificate"</span>
|
||||
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">CertificatePage</span><span class="w"> </span><span class="k">extends</span><span class="w"> </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="w"> </span><span class="nx">extension</span><span class="o">:</span><span class="w"> </span><span class="kt">Renderer.LensExtension</span><span class="w"> </span><span class="p">}</span><span class="o">></span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">CertificatePage</span><span class="w"> </span><span class="k">extends</span><span class="w"> </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="w"> </span><span class="nx">extension</span><span class="o">:</span><span class="w"> </span><span class="kt">Renderer.LensExtension</span><span class="w"> </span><span class="p">}</span><span class="o">></span><span class="w"> </span><span class="p">{</span>
|
||||
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>Next we will implement <code>render</code> method that will display certificates in a list.
|
||||
To do that, we just need to add <code>Renderer.Component.KubeObjectListLayout</code> component inside <code>Renderer.Component.TabLayout</code> component in render method.
|
||||
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="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">Component</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">TabLayout</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">KubeObjectListLayout</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">Component</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">TabLayout</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">KubeObjectListLayout</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">enum</span><span class="w"> </span><span class="nx">sortBy</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">name</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"name"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">namespace</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"namespace"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">issuer</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"issuer"</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="kd">enum</span><span class="w"> </span><span class="nx">sortBy</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">name</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"name"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">namespace</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"namespace"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">issuer</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"issuer"</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">CertificatePage</span><span class="w"> </span><span class="k">extends</span><span class="w"> </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="w"> </span><span class="nx">extension</span><span class="o">:</span><span class="w"> </span><span class="kt">LensRendererExtension</span><span class="w"> </span><span class="p">}</span><span class="o">></span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="c1">// ...</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">CertificatePage</span><span class="w"> </span><span class="k">extends</span><span class="w"> </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="w"> </span><span class="nx">extension</span><span class="o">:</span><span class="w"> </span><span class="kt">LensRendererExtension</span><span class="w"> </span><span class="p">}</span><span class="o">></span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="c1">// ...</span>
|
||||
|
||||
<span class="w"> </span><span class="nx">render</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">(</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">TabLayout</span><span class="o">></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">KubeObjectListLayout</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">className</span><span class="o">=</span><span class="s2">"Certificates"</span><span class="w"> </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="w"></span>
|
||||
<span class="w"> </span><span class="nx">sortingCallbacks</span><span class="o">=</span><span class="p">{{</span><span class="w"></span>
|
||||
<span class="w"> </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="w"> </span><span class="p">(</span><span class="nx">certificate</span><span class="o">:</span><span class="w"> </span><span class="kt">Certificate</span><span class="p">)</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="nx">certificate</span><span class="p">.</span><span class="nx">getName</span><span class="p">(),</span><span class="w"></span>
|
||||
<span class="w"> </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="w"> </span><span class="p">(</span><span class="nx">certificate</span><span class="o">:</span><span class="w"> </span><span class="kt">Certificate</span><span class="p">)</span><span class="w"> </span><span class="p">=></span><span class="w"> </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="w"></span>
|
||||
<span class="w"> </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="w"> </span><span class="p">(</span><span class="nx">certificate</span><span class="o">:</span><span class="w"> </span><span class="kt">Certificate</span><span class="p">)</span><span class="w"> </span><span class="p">=></span><span class="w"> </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="w"></span>
|
||||
<span class="w"> </span><span class="p">}}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">searchFilters</span><span class="o">=</span><span class="p">{[</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">(</span><span class="nx">certificate</span><span class="o">:</span><span class="w"> </span><span class="kt">Certificate</span><span class="p">)</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="nx">certificate</span><span class="p">.</span><span class="nx">getSearchFields</span><span class="p">()</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">]}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">renderHeaderTitle</span><span class="o">=</span><span class="s2">"Certificates"</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">renderTableHeader</span><span class="o">=</span><span class="p">{[</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s2">"Name"</span><span class="p">,</span><span class="w"> </span><span class="nx">className</span><span class="o">:</span><span class="w"> </span><span class="s2">"name"</span><span class="p">,</span><span class="w"> </span><span class="nx">sortBy</span><span class="o">:</span><span class="w"> </span><span class="kt">sortBy.name</span><span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s2">"Namespace"</span><span class="p">,</span><span class="w"> </span><span class="nx">className</span><span class="o">:</span><span class="w"> </span><span class="s2">"namespace"</span><span class="p">,</span><span class="w"> </span><span class="nx">sortBy</span><span class="o">:</span><span class="w"> </span><span class="kt">sortBy.namespace</span><span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s2">"Issuer"</span><span class="p">,</span><span class="w"> </span><span class="nx">className</span><span class="o">:</span><span class="w"> </span><span class="s2">"issuer"</span><span class="p">,</span><span class="w"> </span><span class="nx">sortBy</span><span class="o">:</span><span class="w"> </span><span class="kt">sortBy.namespace</span><span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">]}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">renderTableContents</span><span class="o">=</span><span class="p">{(</span><span class="nx">certificate</span><span class="o">:</span><span class="w"> </span><span class="kt">Certificate</span><span class="p">)</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="p">[</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">certificate</span><span class="p">.</span><span class="nx">getName</span><span class="p">(),</span><span class="w"></span>
|
||||
<span class="w"> </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="w"></span>
|
||||
<span class="w"> </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="w"></span>
|
||||
<span class="w"> </span><span class="p">]}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o">/></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="err">/TabLayout></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">)</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">render</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">(</span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">TabLayout</span><span class="o">></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">KubeObjectListLayout</span>
|
||||
<span class="w"> </span><span class="nx">className</span><span class="o">=</span><span class="s2">"Certificates"</span><span class="w"> </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="w"> </span><span class="nx">sortingCallbacks</span><span class="o">=</span><span class="p">{{</span>
|
||||
<span class="w"> </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="w"> </span><span class="p">(</span><span class="nx">certificate</span><span class="o">:</span><span class="w"> </span><span class="kt">Certificate</span><span class="p">)</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="nx">certificate</span><span class="p">.</span><span class="nx">getName</span><span class="p">(),</span>
|
||||
<span class="w"> </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="w"> </span><span class="p">(</span><span class="nx">certificate</span><span class="o">:</span><span class="w"> </span><span class="kt">Certificate</span><span class="p">)</span><span class="w"> </span><span class="p">=></span><span class="w"> </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="w"> </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="w"> </span><span class="p">(</span><span class="nx">certificate</span><span class="o">:</span><span class="w"> </span><span class="kt">Certificate</span><span class="p">)</span><span class="w"> </span><span class="p">=></span><span class="w"> </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="w"> </span><span class="p">}}</span>
|
||||
<span class="w"> </span><span class="nx">searchFilters</span><span class="o">=</span><span class="p">{[</span>
|
||||
<span class="w"> </span><span class="p">(</span><span class="nx">certificate</span><span class="o">:</span><span class="w"> </span><span class="kt">Certificate</span><span class="p">)</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="nx">certificate</span><span class="p">.</span><span class="nx">getSearchFields</span><span class="p">()</span>
|
||||
<span class="w"> </span><span class="p">]}</span>
|
||||
<span class="w"> </span><span class="nx">renderHeaderTitle</span><span class="o">=</span><span class="s2">"Certificates"</span>
|
||||
<span class="w"> </span><span class="nx">renderTableHeader</span><span class="o">=</span><span class="p">{[</span>
|
||||
<span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s2">"Name"</span><span class="p">,</span><span class="w"> </span><span class="nx">className</span><span class="o">:</span><span class="w"> </span><span class="s2">"name"</span><span class="p">,</span><span class="w"> </span><span class="nx">sortBy</span><span class="o">:</span><span class="w"> </span><span class="kt">sortBy.name</span><span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s2">"Namespace"</span><span class="p">,</span><span class="w"> </span><span class="nx">className</span><span class="o">:</span><span class="w"> </span><span class="s2">"namespace"</span><span class="p">,</span><span class="w"> </span><span class="nx">sortBy</span><span class="o">:</span><span class="w"> </span><span class="kt">sortBy.namespace</span><span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s2">"Issuer"</span><span class="p">,</span><span class="w"> </span><span class="nx">className</span><span class="o">:</span><span class="w"> </span><span class="s2">"issuer"</span><span class="p">,</span><span class="w"> </span><span class="nx">sortBy</span><span class="o">:</span><span class="w"> </span><span class="kt">sortBy.namespace</span><span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="p">]}</span>
|
||||
<span class="w"> </span><span class="nx">renderTableContents</span><span class="o">=</span><span class="p">{(</span><span class="nx">certificate</span><span class="o">:</span><span class="w"> </span><span class="kt">Certificate</span><span class="p">)</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="p">[</span>
|
||||
<span class="w"> </span><span class="nx">certificate</span><span class="p">.</span><span class="nx">getName</span><span class="p">(),</span>
|
||||
<span class="w"> </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="w"> </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="w"> </span><span class="p">]}</span>
|
||||
<span class="w"> </span><span class="o">/></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="err">/TabLayout></span>
|
||||
<span class="w"> </span><span class="p">)</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<h3 id="customize-details-panel">Customize Details panel<a class="headerlink" href="#customize-details-panel" title="Permanent link">#</a></h3>
|
||||
<p>We have learned now, how to list CRD objects in a list view.
|
||||
Next, we will learn how to customize details panel that will be opened when the object is clicked in the list.</p>
|
||||
<p>First, we need to register our custom component to render details for the specific Kubernetes custom resource, in our case <code>Certificate</code>.
|
||||
We will do this again in <code>CrdSampleExtension</code> class:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">CrdSampleExtension</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="c1">//...</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">CrdSampleExtension</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="c1">//...</span>
|
||||
|
||||
<span class="w"> </span><span class="nx">kubeObjectDetailItems</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">kind</span><span class="o">:</span><span class="w"> </span><span class="kt">Certificate.kind</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">apiVersions</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="s2">"cert-manager.io/v1alpha2"</span><span class="p">],</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">components</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">Details</span><span class="o">:</span><span class="w"> </span><span class="p">(</span><span class="nx">props</span><span class="o">:</span><span class="w"> </span><span class="kt">CertificateDetailsProps</span><span class="p">)</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="o"><</span><span class="nx">CertificateDetails</span><span class="w"> </span><span class="p">{...</span><span class="nx">props</span><span class="p">}</span><span class="w"> </span><span class="o">/></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}]</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">kubeObjectDetailItems</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[{</span>
|
||||
<span class="w"> </span><span class="nx">kind</span><span class="o">:</span><span class="w"> </span><span class="kt">Certificate.kind</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">apiVersions</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="s2">"cert-manager.io/v1alpha2"</span><span class="p">],</span>
|
||||
<span class="w"> </span><span class="nx">components</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">Details</span><span class="o">:</span><span class="w"> </span><span class="p">(</span><span class="nx">props</span><span class="o">:</span><span class="w"> </span><span class="kt">CertificateDetailsProps</span><span class="p">)</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="o"><</span><span class="nx">CertificateDetails</span><span class="w"> </span><span class="p">{...</span><span class="nx">props</span><span class="p">}</span><span class="w"> </span><span class="o">/></span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="w"> </span><span class="p">}]</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>Here we defined that <code>CertificateDetails</code> component will render the resource details.
|
||||
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="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"react"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Certificate</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"../certificate"</span><span class="p">;</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"react"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Certificate</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"../certificate"</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">Component</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">KubeObjectDetailsProps</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">DrawerItem</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">Badge</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">Component</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">KubeObjectDetailsProps</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">DrawerItem</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">Badge</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">interface</span><span class="w"> </span><span class="nx">CertificateDetailsProps</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">KubeObjectDetailsProps</span><span class="o"><</span><span class="nx">Certificate</span><span class="o">></span><span class="p">{</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">interface</span><span class="w"> </span><span class="nx">CertificateDetailsProps</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">KubeObjectDetailsProps</span><span class="o"><</span><span class="nx">Certificate</span><span class="o">></span><span class="p">{</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">CertificateDetails</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="o"><</span><span class="nx">CertificateDetailsProps</span><span class="o">></span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">CertificateDetails</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="o"><</span><span class="nx">CertificateDetailsProps</span><span class="o">></span><span class="w"> </span><span class="p">{</span>
|
||||
|
||||
<span class="w"> </span><span class="nx">render</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">object</span><span class="o">:</span><span class="w"> </span><span class="kt">certificate</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="o">!</span><span class="nx">certificate</span><span class="p">)</span><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="kc">null</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">(</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">div</span><span class="w"> </span><span class="nx">className</span><span class="o">=</span><span class="s2">"Certificate"</span><span class="o">></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">DrawerItem</span><span class="w"> </span><span class="nx">name</span><span class="o">=</span><span class="s2">"Created"</span><span class="o">></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">{</span><span class="nx">certificate</span><span class="p">.</span><span class="nx">getAge</span><span class="p">(</span><span class="kc">true</span><span class="p">,</span><span class="w"> </span><span class="kc">false</span><span class="p">)}</span><span class="w"> </span><span class="nx">ago</span><span class="w"> </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">creationTimestamp</span><span class="w"> </span><span class="p">})</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="err">/DrawerItem></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">DrawerItem</span><span class="w"> </span><span class="nx">name</span><span class="o">=</span><span class="s2">"DNS Names"</span><span class="o">></span><span class="w"></span>
|
||||
<span class="w"> </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">dnsNames</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="s2">","</span><span class="p">)}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="err">/DrawerItem></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">DrawerItem</span><span class="w"> </span><span class="nx">name</span><span class="o">=</span><span class="s2">"Secret"</span><span class="o">></span><span class="w"></span>
|
||||
<span class="w"> </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">secretName</span><span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="err">/DrawerItem></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">DrawerItem</span><span class="w"> </span><span class="nx">name</span><span class="o">=</span><span class="s2">"Status"</span><span class="w"> </span><span class="nx">className</span><span class="o">=</span><span class="s2">"status"</span><span class="w"> </span><span class="nx">labelsOnly</span><span class="o">></span><span class="w"></span>
|
||||
<span class="w"> </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="w"> </span><span class="nx">index</span><span class="p">)</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="kr">type</span><span class="p">,</span><span class="w"> </span><span class="nx">reason</span><span class="p">,</span><span class="w"> </span><span class="nx">message</span><span class="p">,</span><span class="w"> </span><span class="nx">status</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">condition</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">kind</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kr">type</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nx">reason</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="o">!</span><span class="nx">kind</span><span class="p">)</span><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="kc">null</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">(</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">Badge</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">key</span><span class="o">=</span><span class="p">{</span><span class="nx">kind</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">index</span><span class="p">}</span><span class="w"> </span><span class="nx">label</span><span class="o">=</span><span class="p">{</span><span class="nx">kind</span><span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">className</span><span class="o">=</span><span class="p">{</span><span class="s2">"success "</span><span class="o">+</span><span class="nx">kind</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">()}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">tooltip</span><span class="o">=</span><span class="p">{</span><span class="nx">message</span><span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o">/></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">);</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">})}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="err">/DrawerItem></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="err">/div></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">)</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">render</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">object</span><span class="o">:</span><span class="w"> </span><span class="kt">certificate</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="o">!</span><span class="nx">certificate</span><span class="p">)</span><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="kc">null</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">(</span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">div</span><span class="w"> </span><span class="nx">className</span><span class="o">=</span><span class="s2">"Certificate"</span><span class="o">></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">DrawerItem</span><span class="w"> </span><span class="nx">name</span><span class="o">=</span><span class="s2">"Created"</span><span class="o">></span>
|
||||
<span class="w"> </span><span class="p">{</span><span class="nx">certificate</span><span class="p">.</span><span class="nx">getAge</span><span class="p">(</span><span class="kc">true</span><span class="p">,</span><span class="w"> </span><span class="kc">false</span><span class="p">)}</span><span class="w"> </span><span class="nx">ago</span><span class="w"> </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">creationTimestamp</span><span class="w"> </span><span class="p">})</span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="err">/DrawerItem></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">DrawerItem</span><span class="w"> </span><span class="nx">name</span><span class="o">=</span><span class="s2">"DNS Names"</span><span class="o">></span>
|
||||
<span class="w"> </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">dnsNames</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="s2">","</span><span class="p">)}</span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="err">/DrawerItem></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">DrawerItem</span><span class="w"> </span><span class="nx">name</span><span class="o">=</span><span class="s2">"Secret"</span><span class="o">></span>
|
||||
<span class="w"> </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">secretName</span><span class="p">}</span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="err">/DrawerItem></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">DrawerItem</span><span class="w"> </span><span class="nx">name</span><span class="o">=</span><span class="s2">"Status"</span><span class="w"> </span><span class="nx">className</span><span class="o">=</span><span class="s2">"status"</span><span class="w"> </span><span class="nx">labelsOnly</span><span class="o">></span>
|
||||
<span class="w"> </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="w"> </span><span class="nx">index</span><span class="p">)</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="kr">type</span><span class="p">,</span><span class="w"> </span><span class="nx">reason</span><span class="p">,</span><span class="w"> </span><span class="nx">message</span><span class="p">,</span><span class="w"> </span><span class="nx">status</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">condition</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">kind</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kr">type</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nx">reason</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="o">!</span><span class="nx">kind</span><span class="p">)</span><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="kc">null</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">(</span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">Badge</span>
|
||||
<span class="w"> </span><span class="nx">key</span><span class="o">=</span><span class="p">{</span><span class="nx">kind</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">index</span><span class="p">}</span><span class="w"> </span><span class="nx">label</span><span class="o">=</span><span class="p">{</span><span class="nx">kind</span><span class="p">}</span>
|
||||
<span class="w"> </span><span class="nx">className</span><span class="o">=</span><span class="p">{</span><span class="s2">"success "</span><span class="o">+</span><span class="nx">kind</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">()}</span>
|
||||
<span class="w"> </span><span class="nx">tooltip</span><span class="o">=</span><span class="p">{</span><span class="nx">message</span><span class="p">}</span>
|
||||
<span class="w"> </span><span class="o">/></span>
|
||||
<span class="w"> </span><span class="p">);</span>
|
||||
<span class="w"> </span><span class="p">})}</span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="err">/DrawerItem></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="err">/div></span>
|
||||
<span class="w"> </span><span class="p">)</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<h2 id="summary">Summary<a class="headerlink" href="#summary" title="Permanent link">#</a></h2>
|
||||
<p>Like we can see above, it's very easy to add custom pages and fetch Kubernetes resources by using Extensions API.
|
||||
|
||||
@@ -850,17 +850,17 @@ 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="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Main</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Main</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExampleExtensionMain</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Main</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">onActivate</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"custom main process extension code started"</span><span class="p">);</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExampleExtensionMain</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Main</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">onActivate</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"custom main process extension code started"</span><span class="p">);</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
|
||||
<span class="w"> </span><span class="nx">onDeactivate</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"custom main process extension de-activated"</span><span class="p">);</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">onDeactivate</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"custom main process extension de-activated"</span><span class="p">);</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>Two methods enable you to run custom code: <code>onActivate()</code> and <code>onDeactivate()</code>.
|
||||
Enabling your extension calls <code>onActivate()</code> and disabling your extension calls <code>onDeactivate()</code>.
|
||||
@@ -879,19 +879,19 @@ Achieve this by starting Lens from the command prompt.</p>
|
||||
<h3 id="appmenus"><code>appMenus</code><a class="headerlink" href="#appmenus" title="Permanent link">#</a></h3>
|
||||
<p>The Main Extension API allows you to customize the UI application menu.
|
||||
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="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Main</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Main</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">SamplePageMainExtension</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Main</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">appMenus</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">parentId</span><span class="o">:</span><span class="w"> </span><span class="s2">"help"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">label</span><span class="o">:</span><span class="w"> </span><span class="s2">"Sample"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">click</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"Sample clicked"</span><span class="p">);</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">];</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">SamplePageMainExtension</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Main</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">appMenus</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span>
|
||||
<span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">parentId</span><span class="o">:</span><span class="w"> </span><span class="s2">"help"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">label</span><span class="o">:</span><span class="w"> </span><span class="s2">"Sample"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">click</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"Sample clicked"</span><span class="p">);</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="p">];</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p><code>appMenus</code> is an array of objects that satisfy the <code>MenuRegistration</code> interface.
|
||||
<code>MenuRegistration</code> extends Electron's <code>MenuItemConstructorOptions</code> interface.
|
||||
@@ -907,45 +907,45 @@ The properties of the appMenus array objects are defined as follows:</p>
|
||||
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="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Main</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Main</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">SamplePageMainExtension</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Main</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">appMenus</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">parentId</span><span class="o">:</span><span class="w"> </span><span class="s2">"help"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">label</span><span class="o">:</span><span class="w"> </span><span class="s2">"Sample"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">click</span><span class="o">:</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="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="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">];</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">SamplePageMainExtension</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Main</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">appMenus</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span>
|
||||
<span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">parentId</span><span class="o">:</span><span class="w"> </span><span class="s2">"help"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">label</span><span class="o">:</span><span class="w"> </span><span class="s2">"Sample"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">click</span><span class="o">:</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="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="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="p">];</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>When the menu item is clicked the <code>navigate()</code> method looks for and displays a global page with id <code>"myGlobalPage"</code>.
|
||||
This page would be defined in your extension's <code>Renderer.LensExtension</code> implementation (See <a href="../renderer-extension/"><code>Renderer.LensExtension</code></a>).</p>
|
||||
<h3 id="traymenus"><code>trayMenus</code><a class="headerlink" href="#traymenus" title="Permanent link">#</a></h3>
|
||||
<p><code>trayMenus</code> is an array of <code>TrayMenuRegistration</code> objects. Most importantly you can define a <code>label</code> and a <code>click</code> handler. Other properties are <code>submenu</code>, <code>enabled</code>, <code>toolTip</code>, <code>id</code> and <code>type</code>.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">interface</span><span class="w"> </span><span class="nx">TrayMenuRegistration</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">label?</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">click</span><span class="o">?:</span><span class="w"> </span><span class="p">(</span><span class="nx">menuItem</span><span class="o">:</span><span class="w"> </span><span class="kt">TrayMenuRegistration</span><span class="p">)</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="ow">void</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">id?</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="kr">type</span><span class="o">?:</span><span class="w"> </span><span class="s2">"normal"</span><span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="s2">"separator"</span><span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="s2">"submenu"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">toolTip?</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">enabled?</span><span class="o">:</span><span class="w"> </span><span class="kt">boolean</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">submenu?</span><span class="o">:</span><span class="w"> </span><span class="kt">TrayMenuRegistration</span><span class="p">[];</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">interface</span><span class="w"> </span><span class="nx">TrayMenuRegistration</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">label?</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="nx">click</span><span class="o">?:</span><span class="w"> </span><span class="p">(</span><span class="nx">menuItem</span><span class="o">:</span><span class="w"> </span><span class="kt">TrayMenuRegistration</span><span class="p">)</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="ow">void</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="nx">id?</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="kr">type</span><span class="o">?:</span><span class="w"> </span><span class="s2">"normal"</span><span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="s2">"separator"</span><span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="s2">"submenu"</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="nx">toolTip?</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="nx">enabled?</span><span class="o">:</span><span class="w"> </span><span class="kt">boolean</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="nx">submenu?</span><span class="o">:</span><span class="w"> </span><span class="kt">TrayMenuRegistration</span><span class="p">[];</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>The following example demonstrates how tray menus can be added from extension:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Main</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Main</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">SampleTrayMenuMainExtension</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Main</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">trayMenus</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">label</span><span class="o">:</span><span class="w"> </span><span class="s2">"menu from the extension"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">click</span><span class="o">:</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"tray menu clicked!"</span><span class="p">);</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">];</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">SampleTrayMenuMainExtension</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Main</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">trayMenus</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span>
|
||||
<span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">label</span><span class="o">:</span><span class="w"> </span><span class="s2">"menu from the extension"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">click</span><span class="o">:</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"tray menu clicked!"</span><span class="p">);</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="p">];</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<h3 id="addcatalogsource-and-removecatalogsource-methods"><code>addCatalogSource()</code> and <code>removeCatalogSource()</code> Methods<a class="headerlink" href="#addcatalogsource-and-removecatalogsource-methods" title="Permanent link">#</a></h3>
|
||||
<p>The <code>Main.LensExtension</code> class also provides the <code>addCatalogSource()</code> and <code>removeCatalogSource()</code> methods, for managing custom catalog items (or entities).
|
||||
|
||||
@@ -815,18 +815,18 @@ 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="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Main</span><span class="p">,</span><span class="w"> </span><span class="nx">Common</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Main</span><span class="p">,</span><span class="w"> </span><span class="nx">Common</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">function</span><span class="w"> </span><span class="nx">rootHandler</span><span class="p">(</span><span class="nx">params</span><span class="o">:</span><span class="w"> </span><span class="kt">Common.Types.ProtocolRouteParams</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </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="w"> </span><span class="nx">params</span><span class="p">);</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="kd">function</span><span class="w"> </span><span class="nx">rootHandler</span><span class="p">(</span><span class="nx">params</span><span class="o">:</span><span class="w"> </span><span class="kt">Common.Types.ProtocolRouteParams</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </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="w"> </span><span class="nx">params</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExampleExtensionMain</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Main</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">protocolHandlers</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">pathSchema</span><span class="o">:</span><span class="w"> </span><span class="s2">"/"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">handler</span><span class="o">:</span><span class="w"> </span><span class="kt">rootHandler</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">]</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExampleExtensionMain</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Main</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">protocolHandlers</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span>
|
||||
<span class="w"> </span><span class="nx">pathSchema</span><span class="o">:</span><span class="w"> </span><span class="s2">"/"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">handler</span><span class="o">:</span><span class="w"> </span><span class="kt">rootHandler</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="p">]</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>For testing the routing of URIs the <code>open</code> (on macOS) or <code>xdg-open</code> (on most linux) CLI utilities can be used.
|
||||
For the above handler, the following URI would be always routed to it:</p>
|
||||
@@ -840,14 +840,14 @@ For example consider an extension <code>example-extension</code> which is publis
|
||||
If it were to register a handler with <code>"/display/:type"</code> as its corresponding link then we would match the following URI like this:</p>
|
||||
<p><img alt="Lens Protocol Link Resolution" src="../images/routing-diag.png" /></p>
|
||||
<p>Once matched, the handler would be called with the following argument (note both <code>"search"</code> and <code>"pathname"</code> will always be defined):</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nt">"search"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nt">"text"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Hello"</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nt">"pathname"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nt">"type"</span><span class="p">:</span><span class="w"> </span><span class="s2">"notification"</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nt">"search"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nt">"text"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Hello"</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="nt">"pathname"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nt">"type"</span><span class="p">:</span><span class="w"> </span><span class="s2">"notification"</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>As the diagram above shows, the search (or query) params are not considered as part of the handler resolution.
|
||||
If the URI had instead been <code>lens://extension/@mirantis/example-extension/display/notification/green</code> then a third (and optional) field will have the rest of the path.
|
||||
|
||||
@@ -1042,17 +1042,17 @@ 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="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExampleExtensionMain</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">onActivate</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"custom renderer process extension code started"</span><span class="p">);</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExampleExtensionMain</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">onActivate</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"custom renderer process extension code started"</span><span class="p">);</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
|
||||
<span class="w"> </span><span class="nx">onDeactivate</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"custom renderer process extension de-activated"</span><span class="p">);</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">onDeactivate</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"custom renderer process extension de-activated"</span><span class="p">);</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>Two methods enable you to run custom code: <code>onActivate()</code> and <code>onDeactivate()</code>.
|
||||
Enabling your extension calls <code>onActivate()</code> and disabling your extension calls <code>onDeactivate()</code>.
|
||||
@@ -1073,20 +1073,20 @@ 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="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">ExampleIcon</span><span class="p">,</span><span class="w"> </span><span class="nx">ExamplePage</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"./page"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"react"</span><span class="p">;</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">ExampleIcon</span><span class="p">,</span><span class="w"> </span><span class="nx">ExamplePage</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"./page"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"react"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExampleExtension</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">clusterPages</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">id</span><span class="o">:</span><span class="w"> </span><span class="s2">"hello"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">components</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">Page</span><span class="o">:</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="o"><</span><span class="nx">ExamplePage</span><span class="w"> </span><span class="nx">extension</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">}</span><span class="w"> </span><span class="o">/></span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">];</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExampleExtension</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">clusterPages</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span>
|
||||
<span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">id</span><span class="o">:</span><span class="w"> </span><span class="s2">"hello"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">components</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">Page</span><span class="o">:</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="o"><</span><span class="nx">ExamplePage</span><span class="w"> </span><span class="nx">extension</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">}</span><span class="w"> </span><span class="o">/></span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="p">];</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p><code>clusterPages</code> is an array of objects that satisfy the <code>PageRegistration</code> interface.
|
||||
The properties of the <code>clusterPages</code> array objects are defined as follows:</p>
|
||||
@@ -1097,20 +1097,20 @@ 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="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"react"</span><span class="p">;</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"react"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExamplePage</span><span class="w"> </span><span class="k">extends</span><span class="w"> </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="w"></span>
|
||||
<span class="w"> </span><span class="nx">extension</span><span class="o">:</span><span class="w"> </span><span class="kt">LensRendererExtension</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="o">></span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">render</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">(</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">div</span><span class="o">></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">p</span><span class="o">></span><span class="nx">Hello</span><span class="w"> </span><span class="nx">world</span><span class="o">!<</span><span class="err">/p></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="err">/div></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">);</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExamplePage</span><span class="w"> </span><span class="k">extends</span><span class="w"> </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="w"> </span><span class="nx">extension</span><span class="o">:</span><span class="w"> </span><span class="kt">LensRendererExtension</span><span class="p">;</span>
|
||||
<span class="p">}</span><span class="o">></span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">render</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">(</span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">div</span><span class="o">></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">p</span><span class="o">></span><span class="nx">Hello</span><span class="w"> </span><span class="nx">world</span><span class="o">!<</span><span class="err">/p></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="err">/div></span>
|
||||
<span class="w"> </span><span class="p">);</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>Note that the <code>ExamplePage</code> class defines the <code>extension</code> property.
|
||||
This allows the <code>ExampleExtension</code> object to be passed in the cluster page definition in the React style.
|
||||
@@ -1120,30 +1120,30 @@ 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="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">ExampleIcon</span><span class="p">,</span><span class="w"> </span><span class="nx">ExamplePage</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"./page"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"react"</span><span class="p">;</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">ExampleIcon</span><span class="p">,</span><span class="w"> </span><span class="nx">ExamplePage</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"./page"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"react"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExampleExtension</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">clusterPages</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">id</span><span class="o">:</span><span class="w"> </span><span class="s2">"hello"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">components</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">Page</span><span class="o">:</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="o"><</span><span class="nx">ExamplePage</span><span class="w"> </span><span class="nx">extension</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">}</span><span class="w"> </span><span class="o">/></span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">];</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExampleExtension</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">clusterPages</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span>
|
||||
<span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">id</span><span class="o">:</span><span class="w"> </span><span class="s2">"hello"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">components</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">Page</span><span class="o">:</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="o"><</span><span class="nx">ExamplePage</span><span class="w"> </span><span class="nx">extension</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">}</span><span class="w"> </span><span class="o">/></span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="p">];</span>
|
||||
|
||||
<span class="w"> </span><span class="nx">clusterPageMenus</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">target</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">pageId</span><span class="o">:</span><span class="w"> </span><span class="s2">"hello"</span><span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s2">"Hello World"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">components</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">Icon</span><span class="o">:</span><span class="w"> </span><span class="kt">ExampleIcon</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">];</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">clusterPageMenus</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span>
|
||||
<span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">target</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">pageId</span><span class="o">:</span><span class="w"> </span><span class="s2">"hello"</span><span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s2">"Hello World"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">components</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">Icon</span><span class="o">:</span><span class="w"> </span><span class="kt">ExampleIcon</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="p">];</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p><code>clusterPageMenus</code> is an array of objects that satisfy the <code>ClusterPageMenuRegistration</code> interface.
|
||||
This element defines how the cluster page menu item will appear and what it will do when you click it.
|
||||
@@ -1157,30 +1157,30 @@ 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="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"react"</span><span class="p">;</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"react"</span><span class="p">;</span>
|
||||
|
||||
<span class="kr">type</span><span class="w"> </span><span class="nx">IconProps</span><span class="w"> </span><span class="o">=</span><span class="w"> </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="w"></span>
|
||||
<span class="kr">type</span><span class="w"> </span><span class="nx">IconProps</span><span class="w"> </span><span class="o">=</span><span class="w"> </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="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">Component</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Icon</span><span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">Component</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Icon</span><span class="w"> </span><span class="p">},</span>
|
||||
<span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="nx">ExampleIcon</span><span class="p">(</span><span class="nx">props</span><span class="o">:</span><span class="w"> </span><span class="kt">IconProps</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="o"><</span><span class="nx">Icon</span><span class="w"> </span><span class="p">{...</span><span class="nx">props</span><span class="p">}</span><span class="w"> </span><span class="nx">material</span><span class="o">=</span><span class="s2">"pages"</span><span class="w"> </span><span class="nx">tooltip</span><span class="o">=</span><span class="p">{</span><span class="s2">"Hi!"</span><span class="p">}</span><span class="w"> </span><span class="o">/></span><span class="p">;</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="nx">ExampleIcon</span><span class="p">(</span><span class="nx">props</span><span class="o">:</span><span class="w"> </span><span class="kt">IconProps</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="o"><</span><span class="nx">Icon</span><span class="w"> </span><span class="p">{...</span><span class="nx">props</span><span class="p">}</span><span class="w"> </span><span class="nx">material</span><span class="o">=</span><span class="s2">"pages"</span><span class="w"> </span><span class="nx">tooltip</span><span class="o">=</span><span class="p">{</span><span class="s2">"Hi!"</span><span class="p">}</span><span class="w"> </span><span class="o">/></span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExamplePage</span><span class="w"> </span><span class="k">extends</span><span class="w"> </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="w"></span>
|
||||
<span class="w"> </span><span class="nx">extension</span><span class="o">:</span><span class="w"> </span><span class="kt">Renderer.LensExtension</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="o">></span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">render</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">(</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">div</span><span class="o">></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">p</span><span class="o">></span><span class="nx">Hello</span><span class="w"> </span><span class="nx">world</span><span class="o">!<</span><span class="err">/p></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="err">/div></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">);</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExamplePage</span><span class="w"> </span><span class="k">extends</span><span class="w"> </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="w"> </span><span class="nx">extension</span><span class="o">:</span><span class="w"> </span><span class="kt">Renderer.LensExtension</span><span class="p">;</span>
|
||||
<span class="p">}</span><span class="o">></span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">render</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">(</span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">div</span><span class="o">></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">p</span><span class="o">></span><span class="nx">Hello</span><span class="w"> </span><span class="nx">world</span><span class="o">!<</span><span class="err">/p></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="err">/div></span>
|
||||
<span class="w"> </span><span class="p">);</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>Lens includes various built-in components available for extension developers to use.
|
||||
One of these is the <code>Renderer.Component.Icon</code>, introduced in <code>ExampleIcon</code>, which you can use to access any of the <a href="https://material.io/resources/icons/">icons</a> available at <a href="https://material.io">Material Design</a>.
|
||||
@@ -1191,52 +1191,52 @@ 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="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">ExampleIcon</span><span class="p">,</span><span class="w"> </span><span class="nx">ExamplePage</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"./page"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"react"</span><span class="p">;</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">ExampleIcon</span><span class="p">,</span><span class="w"> </span><span class="nx">ExamplePage</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"./page"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"react"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExampleExtension</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">clusterPages</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">id</span><span class="o">:</span><span class="w"> </span><span class="s2">"hello"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">components</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">Page</span><span class="o">:</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="o"><</span><span class="nx">ExamplePage</span><span class="w"> </span><span class="nx">extension</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">}</span><span class="w"> </span><span class="o">/></span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">id</span><span class="o">:</span><span class="w"> </span><span class="s2">"bonjour"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">components</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">Page</span><span class="o">:</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="o"><</span><span class="nx">ExamplePage</span><span class="w"> </span><span class="nx">extension</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">}</span><span class="w"> </span><span class="o">/></span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">];</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExampleExtension</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">clusterPages</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span>
|
||||
<span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">id</span><span class="o">:</span><span class="w"> </span><span class="s2">"hello"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">components</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">Page</span><span class="o">:</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="o"><</span><span class="nx">ExamplePage</span><span class="w"> </span><span class="nx">extension</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">}</span><span class="w"> </span><span class="o">/></span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">id</span><span class="o">:</span><span class="w"> </span><span class="s2">"bonjour"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">components</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">Page</span><span class="o">:</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="o"><</span><span class="nx">ExamplePage</span><span class="w"> </span><span class="nx">extension</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">}</span><span class="w"> </span><span class="o">/></span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="p">];</span>
|
||||
|
||||
<span class="w"> </span><span class="nx">clusterPageMenus</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">id</span><span class="o">:</span><span class="w"> </span><span class="s2">"example"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s2">"Greetings"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">components</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">Icon</span><span class="o">:</span><span class="w"> </span><span class="kt">ExampleIcon</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">parentId</span><span class="o">:</span><span class="w"> </span><span class="s2">"example"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">target</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">pageId</span><span class="o">:</span><span class="w"> </span><span class="s2">"hello"</span><span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s2">"Hello World"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">components</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">Icon</span><span class="o">:</span><span class="w"> </span><span class="kt">ExampleIcon</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">parentId</span><span class="o">:</span><span class="w"> </span><span class="s2">"example"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">target</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">pageId</span><span class="o">:</span><span class="w"> </span><span class="s2">"bonjour"</span><span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s2">"Bonjour le monde"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">components</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">Icon</span><span class="o">:</span><span class="w"> </span><span class="kt">ExampleIcon</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">];</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">clusterPageMenus</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span>
|
||||
<span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">id</span><span class="o">:</span><span class="w"> </span><span class="s2">"example"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s2">"Greetings"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">components</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">Icon</span><span class="o">:</span><span class="w"> </span><span class="kt">ExampleIcon</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">parentId</span><span class="o">:</span><span class="w"> </span><span class="s2">"example"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">target</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">pageId</span><span class="o">:</span><span class="w"> </span><span class="s2">"hello"</span><span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s2">"Hello World"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">components</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">Icon</span><span class="o">:</span><span class="w"> </span><span class="kt">ExampleIcon</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">parentId</span><span class="o">:</span><span class="w"> </span><span class="s2">"example"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">target</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">pageId</span><span class="o">:</span><span class="w"> </span><span class="s2">"bonjour"</span><span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s2">"Bonjour le monde"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">components</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">Icon</span><span class="o">:</span><span class="w"> </span><span class="kt">ExampleIcon</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="p">];</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>The above defines two cluster pages and three cluster page menu objects.
|
||||
The cluster page definitions are straightforward.
|
||||
@@ -1256,20 +1256,20 @@ 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="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">HelpPage</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"./page"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"react"</span><span class="p">;</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">HelpPage</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"./page"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"react"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">HelpExtension</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">globalPages</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">id</span><span class="o">:</span><span class="w"> </span><span class="s2">"help"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">components</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">Page</span><span class="o">:</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="o"><</span><span class="nx">HelpPage</span><span class="w"> </span><span class="nx">extension</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">}</span><span class="w"> </span><span class="o">/></span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">];</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">HelpExtension</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">globalPages</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span>
|
||||
<span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">id</span><span class="o">:</span><span class="w"> </span><span class="s2">"help"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">components</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">Page</span><span class="o">:</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="o"><</span><span class="nx">HelpPage</span><span class="w"> </span><span class="nx">extension</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">}</span><span class="w"> </span><span class="o">/></span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="p">];</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p><code>globalPages</code> is an array of objects that satisfy the <code>PageRegistration</code> interface.
|
||||
The properties of the <code>globalPages</code> array objects are defined as follows:</p>
|
||||
@@ -1280,20 +1280,20 @@ 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="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"react"</span><span class="p">;</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"react"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">HelpPage</span><span class="w"> </span><span class="k">extends</span><span class="w"> </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="w"></span>
|
||||
<span class="w"> </span><span class="nx">extension</span><span class="o">:</span><span class="w"> </span><span class="kt">LensRendererExtension</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="o">></span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">render</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">(</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">div</span><span class="o">></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">p</span><span class="o">></span><span class="nx">Help</span><span class="w"> </span><span class="nx">yourself</span><span class="o"><</span><span class="err">/p></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="err">/div></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">);</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">HelpPage</span><span class="w"> </span><span class="k">extends</span><span class="w"> </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="w"> </span><span class="nx">extension</span><span class="o">:</span><span class="w"> </span><span class="kt">LensRendererExtension</span><span class="p">;</span>
|
||||
<span class="p">}</span><span class="o">></span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">render</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">(</span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">div</span><span class="o">></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">p</span><span class="o">></span><span class="nx">Help</span><span class="w"> </span><span class="nx">yourself</span><span class="o"><</span><span class="err">/p></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="err">/div></span>
|
||||
<span class="w"> </span><span class="p">);</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>Note that the <code>HelpPage</code> class defines the <code>extension</code> property.
|
||||
This allows the <code>HelpExtension</code> object to be passed in the global page definition in the React-style.
|
||||
@@ -1310,27 +1310,27 @@ 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="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">ExamplePreferenceHint</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">ExamplePreferenceInput</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"./src/example-preference"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">observable</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"mobx"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"react"</span><span class="p">;</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">ExamplePreferenceHint</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">ExamplePreferenceInput</span><span class="p">,</span>
|
||||
<span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"./src/example-preference"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">observable</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"mobx"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"react"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExampleRendererExtension</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="kd">@observable</span><span class="w"> </span><span class="nx">preference</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">enabled</span><span class="o">:</span><span class="w"> </span><span class="kt">false</span><span class="w"> </span><span class="p">};</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExampleRendererExtension</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="kd">@observable</span><span class="w"> </span><span class="nx">preference</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">enabled</span><span class="o">:</span><span class="w"> </span><span class="kt">false</span><span class="w"> </span><span class="p">};</span>
|
||||
|
||||
<span class="w"> </span><span class="nx">appPreferences</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s2">"Example Preferences"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">components</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">Input</span><span class="o">:</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="o"><</span><span class="nx">ExamplePreferenceInput</span><span class="w"> </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="w"> </span><span class="o">/></span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">Hint</span><span class="o">:</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="o"><</span><span class="nx">ExamplePreferenceHint</span><span class="w"> </span><span class="o">/></span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">];</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">appPreferences</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span>
|
||||
<span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s2">"Example Preferences"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">components</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">Input</span><span class="o">:</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="o"><</span><span class="nx">ExamplePreferenceInput</span><span class="w"> </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="w"> </span><span class="o">/></span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">Hint</span><span class="o">:</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="o"><</span><span class="nx">ExamplePreferenceHint</span><span class="w"> </span><span class="o">/></span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="p">];</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p><code>appPreferences</code> is an array of objects that satisfies the <code>AppPreferenceRegistration</code> interface.
|
||||
The properties of the <code>appPreferences</code> array objects are defined as follows:</p>
|
||||
@@ -1348,47 +1348,47 @@ 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="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">makeObservable</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"mobx"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">observer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"mobx-react"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"react"</span><span class="p">;</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">makeObservable</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"mobx"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">observer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"mobx-react"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"react"</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">Component</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Checkbox</span><span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">Component</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Checkbox</span><span class="w"> </span><span class="p">},</span>
|
||||
<span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExamplePreferenceProps</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">preference</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">enabled</span><span class="o">:</span><span class="w"> </span><span class="kt">boolean</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">};</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExamplePreferenceProps</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">preference</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">enabled</span><span class="o">:</span><span class="w"> </span><span class="kt">boolean</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="p">};</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="kd">@observer</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExamplePreferenceInput</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="o"><</span><span class="nx">ExamplePreferenceProps</span><span class="o">></span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">public</span><span class="w"> </span><span class="kr">constructor</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">super</span><span class="p">({</span><span class="w"> </span><span class="nx">preference</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">enabled</span><span class="o">:</span><span class="w"> </span><span class="kt">false</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="p">});</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">makeObservable</span><span class="p">(</span><span class="k">this</span><span class="p">);</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="kd">@observer</span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExamplePreferenceInput</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="o"><</span><span class="nx">ExamplePreferenceProps</span><span class="o">></span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="k">public</span><span class="w"> </span><span class="kr">constructor</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="k">super</span><span class="p">({</span><span class="w"> </span><span class="nx">preference</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">enabled</span><span class="o">:</span><span class="w"> </span><span class="kt">false</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="p">});</span>
|
||||
<span class="w"> </span><span class="nx">makeObservable</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
|
||||
<span class="w"> </span><span class="nx">render</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">preference</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">(</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">Checkbox</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">label</span><span class="o">=</span><span class="s2">"I understand appPreferences"</span><span class="w"></span>
|
||||
<span class="w"> </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="w"></span>
|
||||
<span class="w"> </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="w"> </span><span class="p">=></span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">preference</span><span class="p">.</span><span class="nx">enabled</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">v</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o">/></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">);</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">render</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">preference</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">(</span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">Checkbox</span>
|
||||
<span class="w"> </span><span class="nx">label</span><span class="o">=</span><span class="s2">"I understand appPreferences"</span>
|
||||
<span class="w"> </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="w"> </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="w"> </span><span class="p">=></span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">preference</span><span class="p">.</span><span class="nx">enabled</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">v</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="p">}}</span>
|
||||
<span class="w"> </span><span class="o">/></span>
|
||||
<span class="w"> </span><span class="p">);</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExamplePreferenceHint</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">render</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="o"><</span><span class="nx">span</span><span class="o">></span><span class="nx">This</span><span class="w"> </span><span class="nx">is</span><span class="w"> </span><span class="nx">an</span><span class="w"> </span><span class="nx">example</span><span class="w"> </span><span class="k">of</span><span class="w"> </span><span class="nx">an</span><span class="w"> </span><span class="nx">appPreference</span><span class="w"> </span><span class="k">for</span><span class="w"> </span><span class="nx">extensions</span><span class="p">.</span><span class="o"><</span><span class="err">/span>;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExamplePreferenceHint</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">render</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="o"><</span><span class="nx">span</span><span class="o">></span><span class="nx">This</span><span class="w"> </span><span class="nx">is</span><span class="w"> </span><span class="nx">an</span><span class="w"> </span><span class="nx">example</span><span class="w"> </span><span class="k">of</span><span class="w"> </span><span class="nx">an</span><span class="w"> </span><span class="nx">appPreference</span><span class="w"> </span><span class="k">for</span><span class="w"> </span><span class="nx">extensions</span><span class="p">.</span><span class="o"><</span><span class="err">/span>;</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p><code>ExamplePreferenceInput</code> implements a simple checkbox using Lens's <code>Renderer.Component.Checkbox</code> using the following properties:</p>
|
||||
<ul>
|
||||
@@ -1416,36 +1416,36 @@ 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="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">HelpIcon</span><span class="p">,</span><span class="w"> </span><span class="nx">HelpPage</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"./page"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"react"</span><span class="p">;</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">HelpIcon</span><span class="p">,</span><span class="w"> </span><span class="nx">HelpPage</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"./page"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"react"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">HelpExtension</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">globalPages</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">id</span><span class="o">:</span><span class="w"> </span><span class="s2">"help"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">components</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">Page</span><span class="o">:</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="o"><</span><span class="nx">HelpPage</span><span class="w"> </span><span class="nx">extension</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">}</span><span class="w"> </span><span class="o">/></span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">];</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">HelpExtension</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">globalPages</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span>
|
||||
<span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">id</span><span class="o">:</span><span class="w"> </span><span class="s2">"help"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">components</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">Page</span><span class="o">:</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="o"><</span><span class="nx">HelpPage</span><span class="w"> </span><span class="nx">extension</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">}</span><span class="w"> </span><span class="o">/></span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="p">];</span>
|
||||
|
||||
<span class="w"> </span><span class="nx">statusBarItems</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">components</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">Item</span><span class="o">:</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="p">(</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">div</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">className</span><span class="o">=</span><span class="s2">"flex align-center gaps"</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">onClick</span><span class="o">=</span><span class="p">{()</span><span class="w"> </span><span class="p">=></span><span class="w"> </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="w"></span>
|
||||
<span class="w"> </span><span class="o">></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">HelpIcon</span><span class="w"> </span><span class="o">/></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">My</span><span class="w"> </span><span class="nx">Status</span><span class="w"> </span><span class="nx">Bar</span><span class="w"> </span><span class="nx">Item</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="err">/div></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">),</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">];</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">statusBarItems</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span>
|
||||
<span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">components</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">Item</span><span class="o">:</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="p">(</span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">div</span>
|
||||
<span class="w"> </span><span class="nx">className</span><span class="o">=</span><span class="s2">"flex align-center gaps"</span>
|
||||
<span class="w"> </span><span class="nx">onClick</span><span class="o">=</span><span class="p">{()</span><span class="w"> </span><span class="p">=></span><span class="w"> </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="w"> </span><span class="o">></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">HelpIcon</span><span class="w"> </span><span class="o">/></span>
|
||||
<span class="w"> </span><span class="nx">My</span><span class="w"> </span><span class="nx">Status</span><span class="w"> </span><span class="nx">Bar</span><span class="w"> </span><span class="nx">Item</span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="err">/div></span>
|
||||
<span class="w"> </span><span class="p">),</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="p">];</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>The properties of the <code>statusBarItems</code> array objects are defined as follows:</p>
|
||||
<ul>
|
||||
@@ -1465,26 +1465,26 @@ It configures the status bar item to navigate to the global page upon activation
|
||||
<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="w"> </span><span class="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"react"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">NamespaceMenuItem</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"./src/namespace-menu-item"</span><span class="p">;</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"react"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">NamespaceMenuItem</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"./src/namespace-menu-item"</span><span class="p">;</span>
|
||||
|
||||
<span class="kr">type</span><span class="w"> </span><span class="nx">KubeObjectMenuProps</span><span class="w"> </span><span class="o">=</span><span class="w"> </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="w"></span>
|
||||
<span class="kr">type</span><span class="w"> </span><span class="nx">Namespace</span><span class="w"> </span><span class="o">=</span><span class="w"> </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="w"></span>
|
||||
<span class="kr">type</span><span class="w"> </span><span class="nx">KubeObjectMenuProps</span><span class="w"> </span><span class="o">=</span><span class="w"> </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="w"> </span><span class="nx">Namespace</span><span class="w"> </span><span class="o">=</span><span class="w"> </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="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExampleExtension</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">kubeObjectMenuItems</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">kind</span><span class="o">:</span><span class="w"> </span><span class="s2">"Namespace"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">apiVersions</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="s2">"v1"</span><span class="p">],</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">components</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">MenuItem</span><span class="o">:</span><span class="w"> </span><span class="p">(</span><span class="nx">props</span><span class="o">:</span><span class="w"> </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="w"> </span><span class="p">=></span><span class="w"> </span><span class="p">(</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">NamespaceMenuItem</span><span class="w"> </span><span class="p">{...</span><span class="nx">props</span><span class="p">}</span><span class="w"> </span><span class="o">/></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">),</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">];</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExampleExtension</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">kubeObjectMenuItems</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span>
|
||||
<span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">kind</span><span class="o">:</span><span class="w"> </span><span class="s2">"Namespace"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">apiVersions</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="s2">"v1"</span><span class="p">],</span>
|
||||
<span class="w"> </span><span class="nx">components</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">MenuItem</span><span class="o">:</span><span class="w"> </span><span class="p">(</span><span class="nx">props</span><span class="o">:</span><span class="w"> </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="w"> </span><span class="p">=></span><span class="w"> </span><span class="p">(</span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">NamespaceMenuItem</span><span class="w"> </span><span class="p">{...</span><span class="nx">props</span><span class="p">}</span><span class="w"> </span><span class="o">/></span>
|
||||
<span class="w"> </span><span class="p">),</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="p">];</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p><code>kubeObjectMenuItems</code> is an array of objects matching the <code>KubeObjectMenuRegistration</code> interface.
|
||||
The example above adds a menu item for namespaces in the cluster dashboard.
|
||||
@@ -1497,46 +1497,46 @@ 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="w"> </span><span class="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"react"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"react"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">Component</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">terminalStore</span><span class="p">,</span><span class="w"> </span><span class="nx">MenuItem</span><span class="p">,</span><span class="w"> </span><span class="nx">Icon</span><span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">Navigation</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">Component</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">terminalStore</span><span class="p">,</span><span class="w"> </span><span class="nx">MenuItem</span><span class="p">,</span><span class="w"> </span><span class="nx">Icon</span><span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="nx">Navigation</span><span class="p">,</span>
|
||||
<span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">;</span>
|
||||
|
||||
<span class="kr">type</span><span class="w"> </span><span class="nx">KubeObjectMenuProps</span><span class="w"> </span><span class="o">=</span><span class="w"> </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="w"></span>
|
||||
<span class="kr">type</span><span class="w"> </span><span class="nx">Namespace</span><span class="w"> </span><span class="o">=</span><span class="w"> </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="w"></span>
|
||||
<span class="kr">type</span><span class="w"> </span><span class="nx">KubeObjectMenuProps</span><span class="w"> </span><span class="o">=</span><span class="w"> </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="w"> </span><span class="nx">Namespace</span><span class="w"> </span><span class="o">=</span><span class="w"> </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="w"> </span><span class="kd">function</span><span class="w"> </span><span class="nx">NamespaceMenuItem</span><span class="p">(</span><span class="nx">props</span><span class="o">:</span><span class="w"> </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="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">object</span><span class="o">:</span><span class="w"> </span><span class="kt">namespace</span><span class="p">,</span><span class="w"> </span><span class="nx">toolbar</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">props</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="o">!</span><span class="nx">namespace</span><span class="p">)</span><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="kc">null</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="nx">NamespaceMenuItem</span><span class="p">(</span><span class="nx">props</span><span class="o">:</span><span class="w"> </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="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">object</span><span class="o">:</span><span class="w"> </span><span class="kt">namespace</span><span class="p">,</span><span class="w"> </span><span class="nx">toolbar</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">props</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="o">!</span><span class="nx">namespace</span><span class="p">)</span><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="kc">null</span><span class="p">;</span>
|
||||
|
||||
<span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">namespaceName</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">namespace</span><span class="p">.</span><span class="nx">getName</span><span class="p">();</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">namespaceName</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">namespace</span><span class="p">.</span><span class="nx">getName</span><span class="p">();</span>
|
||||
|
||||
<span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">sendToTerminal</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">command</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">)</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </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="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">enter</span><span class="o">:</span><span class="w"> </span><span class="kt">true</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">newTab</span><span class="o">:</span><span class="w"> </span><span class="kt">true</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">});</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">Navigation</span><span class="p">.</span><span class="nx">hideDetails</span><span class="p">();</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">};</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">sendToTerminal</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">command</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">)</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="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="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">enter</span><span class="o">:</span><span class="w"> </span><span class="kt">true</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">newTab</span><span class="o">:</span><span class="w"> </span><span class="kt">true</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="p">});</span>
|
||||
<span class="w"> </span><span class="nx">Navigation</span><span class="p">.</span><span class="nx">hideDetails</span><span class="p">();</span>
|
||||
<span class="w"> </span><span class="p">};</span>
|
||||
|
||||
<span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">getPods</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </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="w"></span>
|
||||
<span class="w"> </span><span class="p">};</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">getPods</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </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="w"> </span><span class="p">};</span>
|
||||
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">(</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">MenuItem</span><span class="w"> </span><span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="nx">getPods</span><span class="p">}</span><span class="o">></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">Icon</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">material</span><span class="o">=</span><span class="s2">"speaker_group"</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">interactive</span><span class="o">=</span><span class="p">{</span><span class="nx">toolbar</span><span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">title</span><span class="o">=</span><span class="s2">"Get pods in terminal"</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o">/></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">span</span><span class="w"> </span><span class="nx">className</span><span class="o">=</span><span class="s2">"title"</span><span class="o">></span><span class="nx">Get</span><span class="w"> </span><span class="nx">Pods</span><span class="o"><</span><span class="err">/span></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="err">/MenuItem></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">);</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">(</span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">MenuItem</span><span class="w"> </span><span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="nx">getPods</span><span class="p">}</span><span class="o">></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">Icon</span>
|
||||
<span class="w"> </span><span class="nx">material</span><span class="o">=</span><span class="s2">"speaker_group"</span>
|
||||
<span class="w"> </span><span class="nx">interactive</span><span class="o">=</span><span class="p">{</span><span class="nx">toolbar</span><span class="p">}</span>
|
||||
<span class="w"> </span><span class="nx">title</span><span class="o">=</span><span class="s2">"Get pods in terminal"</span>
|
||||
<span class="w"> </span><span class="o">/></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">span</span><span class="w"> </span><span class="nx">className</span><span class="o">=</span><span class="s2">"title"</span><span class="o">></span><span class="nx">Get</span><span class="w"> </span><span class="nx">Pods</span><span class="o"><</span><span class="err">/span></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="err">/MenuItem></span>
|
||||
<span class="w"> </span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p><code>NamespaceMenuItem</code> returns a <code>Renderer.Component.MenuItem</code> which defines the menu item's appearance and its behavior when activated via the <code>onClick</code> property.
|
||||
In the example, <code>getPods()</code> opens a terminal tab and runs <code>kubectl</code> to get a list of pods running in the current namespace.</p>
|
||||
@@ -1550,28 +1550,28 @@ 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="w"> </span><span class="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"react"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">NamespaceDetailsItem</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"./src/namespace-details-item"</span><span class="p">;</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"react"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">NamespaceDetailsItem</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"./src/namespace-details-item"</span><span class="p">;</span>
|
||||
|
||||
<span class="kr">type</span><span class="w"> </span><span class="nx">KubeObjectMenuProps</span><span class="w"> </span><span class="o">=</span><span class="w"> </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="w"></span>
|
||||
<span class="kr">type</span><span class="w"> </span><span class="nx">KubeObjectDetailsProps</span><span class="w"> </span><span class="o">=</span><span class="w"> </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="w"></span>
|
||||
<span class="kr">type</span><span class="w"> </span><span class="nx">Namespace</span><span class="w"> </span><span class="o">=</span><span class="w"> </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="w"></span>
|
||||
<span class="kr">type</span><span class="w"> </span><span class="nx">KubeObjectMenuProps</span><span class="w"> </span><span class="o">=</span><span class="w"> </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="w"> </span><span class="nx">KubeObjectDetailsProps</span><span class="w"> </span><span class="o">=</span><span class="w"> </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="w"> </span><span class="nx">Namespace</span><span class="w"> </span><span class="o">=</span><span class="w"> </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="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExampleExtension</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">kubeObjectDetailItems</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">kind</span><span class="o">:</span><span class="w"> </span><span class="s2">"Namespace"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">apiVersions</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="s2">"v1"</span><span class="p">],</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">priority</span><span class="o">:</span><span class="w"> </span><span class="kt">10</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">components</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">Details</span><span class="o">:</span><span class="w"> </span><span class="p">(</span><span class="nx">props</span><span class="o">:</span><span class="w"> </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="w"> </span><span class="p">=></span><span class="w"> </span><span class="p">(</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">NamespaceDetailsItem</span><span class="w"> </span><span class="p">{...</span><span class="nx">props</span><span class="p">}</span><span class="w"> </span><span class="o">/></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">),</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">];</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExampleExtension</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">kubeObjectDetailItems</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span>
|
||||
<span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">kind</span><span class="o">:</span><span class="w"> </span><span class="s2">"Namespace"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">apiVersions</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="s2">"v1"</span><span class="p">],</span>
|
||||
<span class="w"> </span><span class="nx">priority</span><span class="o">:</span><span class="w"> </span><span class="kt">10</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">components</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">Details</span><span class="o">:</span><span class="w"> </span><span class="p">(</span><span class="nx">props</span><span class="o">:</span><span class="w"> </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="w"> </span><span class="p">=></span><span class="w"> </span><span class="p">(</span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">NamespaceDetailsItem</span><span class="w"> </span><span class="p">{...</span><span class="nx">props</span><span class="p">}</span><span class="w"> </span><span class="o">/></span>
|
||||
<span class="w"> </span><span class="p">),</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="p">];</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p><code>kubeObjectDetailItems</code> is an array of objects matching the <code>KubeObjectDetailRegistration</code> interface.
|
||||
This example above adds a detail item for namespaces in the cluster dashboard.
|
||||
@@ -1584,42 +1584,42 @@ 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="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">PodsDetailsList</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"./pods-details-list"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"react"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">observable</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"mobx"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">observer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"mobx-react"</span><span class="p">;</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">PodsDetailsList</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"./pods-details-list"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"react"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">observable</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"mobx"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">observer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"mobx-react"</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">K8sApi</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">podsApi</span><span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">Component</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">DrawerTitle</span><span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">K8sApi</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">podsApi</span><span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="nx">Component</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">DrawerTitle</span><span class="w"> </span><span class="p">},</span>
|
||||
<span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">;</span>
|
||||
|
||||
<span class="kr">type</span><span class="w"> </span><span class="nx">KubeObjectMenuProps</span><span class="w"> </span><span class="o">=</span><span class="w"> </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="w"></span>
|
||||
<span class="kr">type</span><span class="w"> </span><span class="nx">Namespace</span><span class="w"> </span><span class="o">=</span><span class="w"> </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="w"></span>
|
||||
<span class="kr">type</span><span class="w"> </span><span class="nx">Pod</span><span class="w"> </span><span class="o">=</span><span class="w"> </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="w"></span>
|
||||
<span class="kr">type</span><span class="w"> </span><span class="nx">KubeObjectMenuProps</span><span class="w"> </span><span class="o">=</span><span class="w"> </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="w"> </span><span class="nx">Namespace</span><span class="w"> </span><span class="o">=</span><span class="w"> </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="w"> </span><span class="nx">Pod</span><span class="w"> </span><span class="o">=</span><span class="w"> </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="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">NamespaceDetailsItem</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="o"><</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">KubeObjectDetailsProps</span><span class="o"><</span><span class="nx">Namespace</span><span class="o">></span><span class="w"></span>
|
||||
<span class="o">></span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="kd">@observable</span><span class="w"> </span><span class="k">private</span><span class="w"> </span><span class="nx">pods</span><span class="o">:</span><span class="w"> </span><span class="kt">Pod</span><span class="p">[];</span><span class="w"></span>
|
||||
<span class="kd">@observer</span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">NamespaceDetailsItem</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="o"><</span>
|
||||
<span class="w"> </span><span class="nx">KubeObjectDetailsProps</span><span class="o"><</span><span class="nx">Namespace</span><span class="o">></span>
|
||||
<span class="o">></span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="kd">@observable</span><span class="w"> </span><span class="k">private</span><span class="w"> </span><span class="nx">pods</span><span class="o">:</span><span class="w"> </span><span class="kt">Pod</span><span class="p">[];</span>
|
||||
|
||||
<span class="w"> </span><span class="k">async</span><span class="w"> </span><span class="nx">componentDidMount</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">namespace</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">object</span><span class="p">.</span><span class="nx">getName</span><span class="p">();</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">async</span><span class="w"> </span><span class="nx">componentDidMount</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">namespace</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">object</span><span class="p">.</span><span class="nx">getName</span><span class="p">();</span>
|
||||
|
||||
<span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">pods</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="nx">podsApi</span><span class="p">.</span><span class="nx">list</span><span class="p">({</span><span class="w"> </span><span class="nx">namespace</span><span class="w"> </span><span class="p">});</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">pods</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="nx">podsApi</span><span class="p">.</span><span class="nx">list</span><span class="p">({</span><span class="w"> </span><span class="nx">namespace</span><span class="w"> </span><span class="p">});</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
|
||||
<span class="w"> </span><span class="nx">render</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">(</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">div</span><span class="o">></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">DrawerTitle</span><span class="o">></span><span class="nx">Pods</span><span class="o"><</span><span class="err">/DrawerTitle></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">PodsDetailsList</span><span class="w"> </span><span class="nx">pods</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">pods</span><span class="p">}</span><span class="w"> </span><span class="o">/></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="err">/div></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">);</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">render</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">(</span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">div</span><span class="o">></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">DrawerTitle</span><span class="o">></span><span class="nx">Pods</span><span class="o"><</span><span class="err">/DrawerTitle></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">PodsDetailsList</span><span class="w"> </span><span class="nx">pods</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">pods</span><span class="p">}</span><span class="w"> </span><span class="o">/></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="err">/div></span>
|
||||
<span class="w"> </span><span class="p">);</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>Since <code>NamespaceDetailsItem</code> extends <code>React.Component<KubeObjectDetailsProps<Namespace>></code>, it can access the current namespace object (type <code>Namespace</code>) through <code>this.props.object</code>.
|
||||
You can query this object for many details about the current namespace.
|
||||
@@ -1638,51 +1638,51 @@ 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="w"> </span><span class="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"react"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"react"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">Component</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">TableHead</span><span class="p">,</span><span class="w"> </span><span class="nx">TableRow</span><span class="p">,</span><span class="w"> </span><span class="nx">TableCell</span><span class="p">,</span><span class="w"> </span><span class="nx">Table</span><span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">Component</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">TableHead</span><span class="p">,</span><span class="w"> </span><span class="nx">TableRow</span><span class="p">,</span><span class="w"> </span><span class="nx">TableCell</span><span class="p">,</span><span class="w"> </span><span class="nx">Table</span><span class="w"> </span><span class="p">},</span>
|
||||
<span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">;</span>
|
||||
|
||||
<span class="kr">type</span><span class="w"> </span><span class="nx">Pod</span><span class="w"> </span><span class="o">=</span><span class="w"> </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="w"></span>
|
||||
<span class="kr">type</span><span class="w"> </span><span class="nx">Pod</span><span class="w"> </span><span class="o">=</span><span class="w"> </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="w"> </span><span class="nx">PodsDetailsListProps</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">pods?</span><span class="o">:</span><span class="w"> </span><span class="kt">Pod</span><span class="p">[];</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="kd">interface</span><span class="w"> </span><span class="nx">PodsDetailsListProps</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">pods?</span><span class="o">:</span><span class="w"> </span><span class="kt">Pod</span><span class="p">[];</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">PodsDetailsList</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="o"><</span><span class="nx">PodsDetailsListProps</span><span class="o">></span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">getTableRow</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">pod</span><span class="o">:</span><span class="w"> </span><span class="kt">Pod</span><span class="p">)</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">(</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">TableRow</span><span class="w"> </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="w"> </span><span class="nx">nowrap</span><span class="o">></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">TableCell</span><span class="w"> </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><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">TableCell</span><span class="w"> </span><span class="nx">className</span><span class="o">=</span><span class="s2">"podAge"</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">getAge</span><span class="p">()}</span><span class="o"><</span><span class="err">/TableCell></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">TableCell</span><span class="w"> </span><span class="nx">className</span><span class="o">=</span><span class="s2">"podStatus"</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">getStatus</span><span class="p">()}</span><span class="o"><</span><span class="err">/TableCell></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="err">/TableRow></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">);</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">};</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">PodsDetailsList</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="o"><</span><span class="nx">PodsDetailsListProps</span><span class="o">></span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">getTableRow</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">pod</span><span class="o">:</span><span class="w"> </span><span class="kt">Pod</span><span class="p">)</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">(</span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">TableRow</span><span class="w"> </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="w"> </span><span class="nx">nowrap</span><span class="o">></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">TableCell</span><span class="w"> </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>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">TableCell</span><span class="w"> </span><span class="nx">className</span><span class="o">=</span><span class="s2">"podAge"</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">getAge</span><span class="p">()}</span><span class="o"><</span><span class="err">/TableCell></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">TableCell</span><span class="w"> </span><span class="nx">className</span><span class="o">=</span><span class="s2">"podStatus"</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">getStatus</span><span class="p">()}</span><span class="o"><</span><span class="err">/TableCell></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="err">/TableRow></span>
|
||||
<span class="w"> </span><span class="p">);</span>
|
||||
<span class="w"> </span><span class="p">};</span>
|
||||
|
||||
<span class="w"> </span><span class="nx">render</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">pods</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">render</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">pods</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">;</span>
|
||||
|
||||
<span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="o">!</span><span class="nx">pods</span><span class="o">?</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="kc">null</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="o">!</span><span class="nx">pods</span><span class="o">?</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="kc">null</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">(</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">div</span><span class="o">></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">Table</span><span class="o">></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">TableHead</span><span class="o">></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">TableCell</span><span class="w"> </span><span class="nx">className</span><span class="o">=</span><span class="s2">"podName"</span><span class="o">></span><span class="nx">Name</span><span class="o"><</span><span class="err">/TableCell></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">TableCell</span><span class="w"> </span><span class="nx">className</span><span class="o">=</span><span class="s2">"podAge"</span><span class="o">></span><span class="nx">Age</span><span class="o"><</span><span class="err">/TableCell></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">TableCell</span><span class="w"> </span><span class="nx">className</span><span class="o">=</span><span class="s2">"podStatus"</span><span class="o">></span><span class="nx">Status</span><span class="o"><</span><span class="err">/TableCell></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="err">/TableHead></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">{</span><span class="nx">pods</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">getTableRow</span><span class="p">)}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="err">/Table></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="err">/div></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">);</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">(</span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">div</span><span class="o">></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">Table</span><span class="o">></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">TableHead</span><span class="o">></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">TableCell</span><span class="w"> </span><span class="nx">className</span><span class="o">=</span><span class="s2">"podName"</span><span class="o">></span><span class="nx">Name</span><span class="o"><</span><span class="err">/TableCell></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">TableCell</span><span class="w"> </span><span class="nx">className</span><span class="o">=</span><span class="s2">"podAge"</span><span class="o">></span><span class="nx">Age</span><span class="o"><</span><span class="err">/TableCell></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">TableCell</span><span class="w"> </span><span class="nx">className</span><span class="o">=</span><span class="s2">"podStatus"</span><span class="o">></span><span class="nx">Status</span><span class="o"><</span><span class="err">/TableCell></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="err">/TableHead></span>
|
||||
<span class="w"> </span><span class="p">{</span><span class="nx">pods</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">getTableRow</span><span class="p">)}</span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="err">/Table></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="err">/div></span>
|
||||
<span class="w"> </span><span class="p">);</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p><code>PodsDetailsList</code> produces a simple table showing a list of the pods found in this namespace:</p>
|
||||
<p><img alt="DetailsWithPods" src="../images/kubeobjectdetailitemwithpods.png" /></p>
|
||||
|
||||
@@ -740,70 +740,70 @@ It could be applied automatically to a cluster by the extension, or the end-user
|
||||
<p>To access the cluster <strong>Settings</strong> page, right-click the relevant cluster in the left side menu and click <strong>Settings</strong>.</p>
|
||||
</div>
|
||||
<p>The resource stack in this example consists of a single kubernetes resource:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="nt">apiVersion</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">v1</span><span class="w"></span>
|
||||
<span class="nt">kind</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">Pod</span><span class="w"></span>
|
||||
<span class="nt">metadata</span><span class="p">:</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">example-pod</span><span class="w"></span>
|
||||
<span class="nt">spec</span><span class="p">:</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nt">containers</span><span class="p">:</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">example-pod</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nt">image</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">nginx</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="nt">apiVersion</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">v1</span>
|
||||
<span class="nt">kind</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">Pod</span>
|
||||
<span class="nt">metadata</span><span class="p">:</span>
|
||||
<span class="w"> </span><span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">example-pod</span>
|
||||
<span class="nt">spec</span><span class="p">:</span>
|
||||
<span class="w"> </span><span class="nt">containers</span><span class="p">:</span>
|
||||
<span class="w"> </span><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">example-pod</span>
|
||||
<span class="w"> </span><span class="nt">image</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">nginx</span>
|
||||
</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="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">,</span><span class="w"> </span><span class="nx">Common</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="kr">as</span><span class="w"> </span><span class="nx">path</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"path"</span><span class="p">;</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">,</span><span class="w"> </span><span class="nx">Common</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="kr">as</span><span class="w"> </span><span class="nx">path</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"path"</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">K8sApi</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">ResourceStack</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">forCluster</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">Pod</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">K8sApi</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">ResourceStack</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">forCluster</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">Pod</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">;</span>
|
||||
|
||||
<span class="kr">type</span><span class="w"> </span><span class="nx">ResourceStack</span><span class="w"> </span><span class="o">=</span><span class="w"> </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="w"></span>
|
||||
<span class="kr">type</span><span class="w"> </span><span class="nx">Pod</span><span class="w"> </span><span class="o">=</span><span class="w"> </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="w"></span>
|
||||
<span class="kr">type</span><span class="w"> </span><span class="nx">KubernetesCluster</span><span class="w"> </span><span class="o">=</span><span class="w"> </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="w"></span>
|
||||
<span class="kr">type</span><span class="w"> </span><span class="nx">ResourceStack</span><span class="w"> </span><span class="o">=</span><span class="w"> </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="w"> </span><span class="nx">Pod</span><span class="w"> </span><span class="o">=</span><span class="w"> </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="w"> </span><span class="nx">KubernetesCluster</span><span class="w"> </span><span class="o">=</span><span class="w"> </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="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExampleClusterFeature</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">protected</span><span class="w"> </span><span class="nx">stack</span><span class="o">:</span><span class="w"> </span><span class="kt">ResourceStack</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExampleClusterFeature</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="k">protected</span><span class="w"> </span><span class="nx">stack</span><span class="o">:</span><span class="w"> </span><span class="kt">ResourceStack</span><span class="p">;</span>
|
||||
|
||||
<span class="w"> </span><span class="kr">constructor</span><span class="p">(</span><span class="k">protected</span><span class="w"> </span><span class="nx">cluster</span><span class="o">:</span><span class="w"> </span><span class="kt">KubernetesCluster</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">stack</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">ResourceStack</span><span class="p">(</span><span class="nx">cluster</span><span class="p">,</span><span class="w"> </span><span class="s2">"example-resource-stack"</span><span class="p">);</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="kr">constructor</span><span class="p">(</span><span class="k">protected</span><span class="w"> </span><span class="nx">cluster</span><span class="o">:</span><span class="w"> </span><span class="kt">KubernetesCluster</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">stack</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">ResourceStack</span><span class="p">(</span><span class="nx">cluster</span><span class="p">,</span><span class="w"> </span><span class="s2">"example-resource-stack"</span><span class="p">);</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
|
||||
<span class="w"> </span><span class="nx">get</span><span class="w"> </span><span class="nx">resourceFolder</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </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="w"> </span><span class="s2">"../resources/"</span><span class="p">);</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">get</span><span class="w"> </span><span class="nx">resourceFolder</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </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="w"> </span><span class="s2">"../resources/"</span><span class="p">);</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
|
||||
<span class="w"> </span><span class="nx">install</span><span class="p">()</span><span class="o">:</span><span class="w"> </span><span class="nb">Promise</span><span class="o"><</span><span class="kt">string</span><span class="o">></span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </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="w"></span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </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="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">install</span><span class="p">()</span><span class="o">:</span><span class="w"> </span><span class="nb">Promise</span><span class="o"><</span><span class="kt">string</span><span class="o">></span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </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="w"> </span><span class="k">return</span><span class="w"> </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="w"> </span><span class="p">}</span>
|
||||
|
||||
<span class="w"> </span><span class="k">async</span><span class="w"> </span><span class="nx">isInstalled</span><span class="p">()</span><span class="o">:</span><span class="w"> </span><span class="nb">Promise</span><span class="o"><</span><span class="kt">boolean</span><span class="o">></span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">try</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">podApi</span><span class="w"> </span><span class="o">=</span><span class="w"> </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="w"> </span><span class="nx">Pod</span><span class="p">);</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">examplePod</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">await</span><span class="w"> </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="w"> </span><span class="s2">"example-pod"</span><span class="p">,</span><span class="w"> </span><span class="nx">namespace</span><span class="o">:</span><span class="w"> </span><span class="s2">"default"</span><span class="p">});</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">async</span><span class="w"> </span><span class="nx">isInstalled</span><span class="p">()</span><span class="o">:</span><span class="w"> </span><span class="nb">Promise</span><span class="o"><</span><span class="kt">boolean</span><span class="o">></span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="k">try</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">podApi</span><span class="w"> </span><span class="o">=</span><span class="w"> </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="w"> </span><span class="nx">Pod</span><span class="p">);</span>
|
||||
<span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">examplePod</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">await</span><span class="w"> </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="w"> </span><span class="s2">"example-pod"</span><span class="p">,</span><span class="w"> </span><span class="nx">namespace</span><span class="o">:</span><span class="w"> </span><span class="s2">"default"</span><span class="p">});</span>
|
||||
|
||||
<span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">examplePod</span><span class="o">?</span><span class="p">.</span><span class="nx">kind</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"found example-pod"</span><span class="p">);</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="kc">true</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="k">catch</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"Error getting example-pod:"</span><span class="p">,</span><span class="w"> </span><span class="nx">e</span><span class="p">);</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"didn't find example-pod"</span><span class="p">);</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">examplePod</span><span class="o">?</span><span class="p">.</span><span class="nx">kind</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"found example-pod"</span><span class="p">);</span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="kc">true</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="k">catch</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"Error getting example-pod:"</span><span class="p">,</span><span class="w"> </span><span class="nx">e</span><span class="p">);</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"didn't find example-pod"</span><span class="p">);</span>
|
||||
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="kc">false</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="kc">false</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
|
||||
<span class="w"> </span><span class="k">async</span><span class="w"> </span><span class="nx">uninstall</span><span class="p">()</span><span class="o">:</span><span class="w"> </span><span class="nb">Promise</span><span class="o"><</span><span class="kt">string</span><span class="o">></span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </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="w"></span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </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="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">async</span><span class="w"> </span><span class="nx">uninstall</span><span class="p">()</span><span class="o">:</span><span class="w"> </span><span class="nb">Promise</span><span class="o"><</span><span class="kt">string</span><span class="o">></span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </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="w"> </span><span class="k">return</span><span class="w"> </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="w"> </span><span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>The <code>ExampleClusterFeature</code> class constructor takes a <code>Common.Catalog.KubernetesCluster</code> argument.
|
||||
This is the cluster that the resource stack will be applied to, and the constructor instantiates a <code>Renderer.K8sApi.ResourceStack</code> as such.
|
||||
@@ -815,86 +815,86 @@ 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="w"> </span><span class="k">import</span><span class="w"> </span><span class="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"react"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Common</span><span class="p">,</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">observer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"mobx-react"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">computed</span><span class="p">,</span><span class="w"> </span><span class="nx">observable</span><span class="p">,</span><span class="w"> </span><span class="nx">makeObservable</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"mobx"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">ExampleClusterFeature</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"./example-cluster-feature"</span><span class="p">;</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="w"> </span><span class="k">import</span><span class="w"> </span><span class="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"react"</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Common</span><span class="p">,</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">observer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"mobx-react"</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">computed</span><span class="p">,</span><span class="w"> </span><span class="nx">observable</span><span class="p">,</span><span class="w"> </span><span class="nx">makeObservable</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"mobx"</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">ExampleClusterFeature</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"./example-cluster-feature"</span><span class="p">;</span>
|
||||
|
||||
<span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">Component</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">SubTitle</span><span class="p">,</span><span class="w"> </span><span class="nx">Button</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">Component</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">SubTitle</span><span class="p">,</span><span class="w"> </span><span class="nx">Button</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">;</span>
|
||||
|
||||
<span class="w"> </span><span class="kd">interface</span><span class="w"> </span><span class="nx">ExampleClusterFeatureSettingsProps</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">cluster</span><span class="o">:</span><span class="w"> </span><span class="kt">Common.Catalog.KubernetesCluster</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="kd">interface</span><span class="w"> </span><span class="nx">ExampleClusterFeatureSettingsProps</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">cluster</span><span class="o">:</span><span class="w"> </span><span class="kt">Common.Catalog.KubernetesCluster</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
|
||||
<span class="w"> </span><span class="kd">@observer</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExampleClusterFeatureSettings</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="o"><</span><span class="nx">ExampleClusterFeatureSettingsProps</span><span class="o">></span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="kr">constructor</span><span class="p">(</span><span class="nx">props</span><span class="o">:</span><span class="w"> </span><span class="kt">ExampleClusterFeatureSettingsProps</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">super</span><span class="p">(</span><span class="nx">props</span><span class="p">);</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">makeObservable</span><span class="p">(</span><span class="k">this</span><span class="p">);</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="kd">@observer</span>
|
||||
<span class="w"> </span><span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExampleClusterFeatureSettings</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="o"><</span><span class="nx">ExampleClusterFeatureSettingsProps</span><span class="o">></span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="kr">constructor</span><span class="p">(</span><span class="nx">props</span><span class="o">:</span><span class="w"> </span><span class="kt">ExampleClusterFeatureSettingsProps</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="k">super</span><span class="p">(</span><span class="nx">props</span><span class="p">);</span>
|
||||
<span class="w"> </span><span class="nx">makeObservable</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
|
||||
<span class="w"> </span><span class="kd">@observable</span><span class="w"> </span><span class="nx">installed</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">false</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="kd">@observable</span><span class="w"> </span><span class="nx">inProgress</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">false</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="kd">@observable</span><span class="w"> </span><span class="nx">installed</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">false</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="kd">@observable</span><span class="w"> </span><span class="nx">inProgress</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">false</span><span class="p">;</span>
|
||||
|
||||
<span class="w"> </span><span class="nx">feature</span><span class="o">:</span><span class="w"> </span><span class="kt">ExampleClusterFeature</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">feature</span><span class="o">:</span><span class="w"> </span><span class="kt">ExampleClusterFeature</span><span class="p">;</span>
|
||||
|
||||
<span class="w"> </span><span class="k">async</span><span class="w"> </span><span class="nx">componentDidMount</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">feature</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </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="w"></span>
|
||||
<span class="w"> </span><span class="k">async</span><span class="w"> </span><span class="nx">componentDidMount</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">feature</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </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="w"> </span><span class="k">await</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">updateFeatureState</span><span class="p">();</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">updateFeatureState</span><span class="p">();</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
|
||||
<span class="w"> </span><span class="k">async</span><span class="w"> </span><span class="nx">updateFeatureState</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">installed</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">feature</span><span class="p">.</span><span class="nx">isInstalled</span><span class="p">();</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">async</span><span class="w"> </span><span class="nx">updateFeatureState</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">installed</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">feature</span><span class="p">.</span><span class="nx">isInstalled</span><span class="p">();</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
|
||||
<span class="w"> </span><span class="k">async</span><span class="w"> </span><span class="nx">save</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">inProgress</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">true</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">async</span><span class="w"> </span><span class="nx">save</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">inProgress</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">true</span><span class="p">;</span>
|
||||
|
||||
<span class="w"> </span><span class="k">try</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">installed</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">feature</span><span class="p">.</span><span class="nx">uninstall</span><span class="p">();</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="k">else</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">feature</span><span class="p">.</span><span class="nx">install</span><span class="p">();</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="k">finally</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">inProgress</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">false</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">try</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">installed</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">feature</span><span class="p">.</span><span class="nx">uninstall</span><span class="p">();</span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="k">else</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">feature</span><span class="p">.</span><span class="nx">install</span><span class="p">();</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="k">finally</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">inProgress</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">false</span><span class="p">;</span>
|
||||
|
||||
<span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">updateFeatureState</span><span class="p">();</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">updateFeatureState</span><span class="p">();</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
|
||||
<span class="w"> </span><span class="kd">@computed</span><span class="w"> </span><span class="nx">get</span><span class="w"> </span><span class="nx">buttonLabel</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">inProgress</span><span class="w"> </span><span class="o">&&</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">installed</span><span class="p">)</span><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="s2">"Uninstalling ..."</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">if</span><span class="w"> </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="w"> </span><span class="k">return</span><span class="w"> </span><span class="s2">"Applying ..."</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="kd">@computed</span><span class="w"> </span><span class="nx">get</span><span class="w"> </span><span class="nx">buttonLabel</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">inProgress</span><span class="w"> </span><span class="o">&&</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">installed</span><span class="p">)</span><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="s2">"Uninstalling ..."</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="k">if</span><span class="w"> </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="w"> </span><span class="k">return</span><span class="w"> </span><span class="s2">"Applying ..."</span><span class="p">;</span>
|
||||
|
||||
<span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">installed</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="s2">"Uninstall"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">installed</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="s2">"Uninstall"</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="s2">"Apply"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="s2">"Apply"</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
|
||||
<span class="w"> </span><span class="nx">render</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">(</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">section</span><span class="o">></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">SubTitle</span><span class="w"> </span><span class="nx">title</span><span class="o">=</span><span class="s2">"Example Cluster Feature using a Resource Stack"</span><span class="w"> </span><span class="o">/></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">Button</span><span class="w"></span>
|
||||
<span class="w"> </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="w"></span>
|
||||
<span class="w"> </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="w"></span>
|
||||
<span class="w"> </span><span class="nx">onClick</span><span class="o">=</span><span class="p">{()</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">save</span><span class="p">()}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">primary</span><span class="w"> </span><span class="o">/></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="err">/section></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="err">/></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">);</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">render</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">(</span>
|
||||
<span class="w"> </span><span class="o"><></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">section</span><span class="o">></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">SubTitle</span><span class="w"> </span><span class="nx">title</span><span class="o">=</span><span class="s2">"Example Cluster Feature using a Resource Stack"</span><span class="w"> </span><span class="o">/></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">Button</span>
|
||||
<span class="w"> </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="w"> </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="w"> </span><span class="nx">onClick</span><span class="o">=</span><span class="p">{()</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">save</span><span class="p">()}</span>
|
||||
<span class="w"> </span><span class="nx">primary</span><span class="w"> </span><span class="o">/></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="err">/section></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="err">/></span>
|
||||
<span class="w"> </span><span class="p">);</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>The <code>ExampleClusterFeatureSettings</code> class extends <code>React.Component</code> and simply renders a subtitle and a button.
|
||||
<code>ExampleClusterFeatureSettings</code> takes the cluster as a prop and when the React component has mounted the <code>ExampleClusterFeature</code> is instantiated using this cluster (in <code>componentDidMount()</code>).
|
||||
@@ -908,26 +908,26 @@ 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="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Common</span><span class="p">,</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">ExampleClusterFeatureSettings</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"./src/example-cluster-feature-settings"</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"react"</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Common</span><span class="p">,</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">ExampleClusterFeatureSettings</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"./src/example-cluster-feature-settings"</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"react"</span>
|
||||
|
||||
<span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExampleExtension</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">entitySettings</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">apiVersions</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="s2">"entity.k8slens.dev/v1alpha1"</span><span class="p">],</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">kind</span><span class="o">:</span><span class="w"> </span><span class="s2">"KubernetesCluster"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s2">"Example Cluster Feature"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">priority</span><span class="o">:</span><span class="w"> </span><span class="kt">5</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">components</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">View</span><span class="o">:</span><span class="w"> </span><span class="p">({</span><span class="w"> </span><span class="nx">entity</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">null</span><span class="w"> </span><span class="p">}</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">entity</span><span class="o">:</span><span class="w"> </span><span class="kt">Common.Catalog.KubernetesCluster</span><span class="p">})</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="p">(</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">ExampleClusterFeatureSettings</span><span class="w"> </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="w"> </span><span class="o">/></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">)</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">];</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExampleExtension</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">entitySettings</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span>
|
||||
<span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">apiVersions</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="s2">"entity.k8slens.dev/v1alpha1"</span><span class="p">],</span>
|
||||
<span class="w"> </span><span class="nx">kind</span><span class="o">:</span><span class="w"> </span><span class="s2">"KubernetesCluster"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s2">"Example Cluster Feature"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">priority</span><span class="o">:</span><span class="w"> </span><span class="kt">5</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">components</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">View</span><span class="o">:</span><span class="w"> </span><span class="p">({</span><span class="w"> </span><span class="nx">entity</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">null</span><span class="w"> </span><span class="p">}</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">entity</span><span class="o">:</span><span class="w"> </span><span class="kt">Common.Catalog.KubernetesCluster</span><span class="p">})</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="p">(</span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">ExampleClusterFeatureSettings</span><span class="w"> </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="w"> </span><span class="o">/></span>
|
||||
<span class="w"> </span><span class="p">)</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="w"> </span><span class="p">];</span>
|
||||
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>An entity setting is added to the <code>entitySettings</code> array field of the <code>Renderer.LensExtension</code> class.
|
||||
Because Lens's catalog can contain different kinds of entities, the kind must be identified.
|
||||
|
||||
@@ -793,37 +793,37 @@ 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="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Common</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">observable</span><span class="p">,</span><span class="w"> </span><span class="nx">makeObservable</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"mobx"</span><span class="p">;</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Common</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">observable</span><span class="p">,</span><span class="w"> </span><span class="nx">makeObservable</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"mobx"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span><span class="w"> </span><span class="kr">type</span><span class="w"> </span><span class="nx">ExamplePreferencesModel</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">enabled</span><span class="o">:</span><span class="w"> </span><span class="kt">boolean</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="p">};</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="kr">type</span><span class="w"> </span><span class="nx">ExamplePreferencesModel</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">enabled</span><span class="o">:</span><span class="w"> </span><span class="kt">boolean</span><span class="p">;</span>
|
||||
<span class="p">};</span>
|
||||
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExamplePreferencesStore</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Common</span><span class="p">.</span><span class="nx">Store</span><span class="p">.</span><span class="nx">ExtensionStore</span><span class="o"><</span><span class="nx">ExamplePreferencesModel</span><span class="o">></span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExamplePreferencesStore</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Common</span><span class="p">.</span><span class="nx">Store</span><span class="p">.</span><span class="nx">ExtensionStore</span><span class="o"><</span><span class="nx">ExamplePreferencesModel</span><span class="o">></span><span class="w"> </span><span class="p">{</span>
|
||||
|
||||
<span class="w"> </span><span class="kd">@observable</span><span class="w"> </span><span class="nx">enabled</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">false</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="kd">@observable</span><span class="w"> </span><span class="nx">enabled</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">false</span><span class="p">;</span>
|
||||
|
||||
<span class="w"> </span><span class="k">private</span><span class="w"> </span><span class="kr">constructor</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">super</span><span class="p">({</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">configName</span><span class="o">:</span><span class="w"> </span><span class="s2">"example-preferences-store"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">defaults</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">enabled</span><span class="o">:</span><span class="w"> </span><span class="kt">false</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">});</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">makeObservable</span><span class="p">(</span><span class="k">this</span><span class="p">);</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">private</span><span class="w"> </span><span class="kr">constructor</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="k">super</span><span class="p">({</span>
|
||||
<span class="w"> </span><span class="nx">configName</span><span class="o">:</span><span class="w"> </span><span class="s2">"example-preferences-store"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">defaults</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">enabled</span><span class="o">:</span><span class="w"> </span><span class="kt">false</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="w"> </span><span class="p">});</span>
|
||||
<span class="w"> </span><span class="nx">makeObservable</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
|
||||
<span class="w"> </span><span class="k">protected</span><span class="w"> </span><span class="nx">fromStore</span><span class="p">({</span><span class="w"> </span><span class="nx">enabled</span><span class="w"> </span><span class="p">}</span><span class="o">:</span><span class="w"> </span><span class="nx">ExamplePreferencesModel</span><span class="p">)</span><span class="o">:</span><span class="w"> </span><span class="ow">void</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">enabled</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">enabled</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">protected</span><span class="w"> </span><span class="nx">fromStore</span><span class="p">({</span><span class="w"> </span><span class="nx">enabled</span><span class="w"> </span><span class="p">}</span><span class="o">:</span><span class="w"> </span><span class="nx">ExamplePreferencesModel</span><span class="p">)</span><span class="o">:</span><span class="w"> </span><span class="ow">void</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">enabled</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">enabled</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
|
||||
<span class="w"> </span><span class="nx">toJSON</span><span class="p">()</span><span class="o">:</span><span class="w"> </span><span class="nx">ExamplePreferencesModel</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">enabled</span><span class="o">:</span><span class="w"> </span><span class="kt">this.enabled</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">};</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">toJSON</span><span class="p">()</span><span class="o">:</span><span class="w"> </span><span class="nx">ExamplePreferencesModel</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">enabled</span><span class="o">:</span><span class="w"> </span><span class="kt">this.enabled</span>
|
||||
<span class="w"> </span><span class="p">};</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>First, our example defines the extension's data model using the simple <code>ExamplePreferencesModel</code> type.
|
||||
This has a single field, <code>enabled</code>, which represents the preference's state.
|
||||
@@ -849,74 +849,74 @@ 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="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Main</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">ExamplePreferencesStore</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"./src/example-preference-store"</span><span class="p">;</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Main</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">ExamplePreferencesStore</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"./src/example-preference-store"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExampleMainExtension</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Main</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">async</span><span class="w"> </span><span class="nx">onActivate</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="nx">ExamplePreferencesStore</span><span class="p">.</span><span class="nx">getInstanceOrCreate</span><span class="p">().</span><span class="nx">loadExtension</span><span class="p">(</span><span class="k">this</span><span class="p">);</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExampleMainExtension</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Main</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="k">async</span><span class="w"> </span><span class="nx">onActivate</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="nx">ExamplePreferencesStore</span><span class="p">.</span><span class="nx">getInstanceOrCreate</span><span class="p">().</span><span class="nx">loadExtension</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<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="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">ExamplePreferenceHint</span><span class="p">,</span><span class="w"> </span><span class="nx">ExamplePreferenceInput</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"./src/example-preference"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">ExamplePreferencesStore</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"./src/example-preference-store"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"react"</span><span class="p">;</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">ExamplePreferenceHint</span><span class="p">,</span><span class="w"> </span><span class="nx">ExamplePreferenceInput</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"./src/example-preference"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">ExamplePreferencesStore</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"./src/example-preference-store"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"react"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExampleRendererExtension</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExampleRendererExtension</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span>
|
||||
|
||||
<span class="w"> </span><span class="k">async</span><span class="w"> </span><span class="nx">onActivate</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="nx">ExamplePreferencesStore</span><span class="p">.</span><span class="nx">getInstanceOrCreate</span><span class="p">().</span><span class="nx">loadExtension</span><span class="p">(</span><span class="k">this</span><span class="p">);</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">async</span><span class="w"> </span><span class="nx">onActivate</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="nx">ExamplePreferencesStore</span><span class="p">.</span><span class="nx">getInstanceOrCreate</span><span class="p">().</span><span class="nx">loadExtension</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
|
||||
<span class="w"> </span><span class="nx">appPreferences</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s2">"Example Preferences"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">components</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">Input</span><span class="o">:</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="o"><</span><span class="nx">ExamplePreferenceInput</span><span class="w"> </span><span class="o">/></span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">Hint</span><span class="o">:</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="o"><</span><span class="nx">ExamplePreferenceHint</span><span class="o">/></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">];</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">appPreferences</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span>
|
||||
<span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s2">"Example Preferences"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">components</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">Input</span><span class="o">:</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="o"><</span><span class="nx">ExamplePreferenceInput</span><span class="w"> </span><span class="o">/></span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">Hint</span><span class="o">:</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="o"><</span><span class="nx">ExamplePreferenceHint</span><span class="o">/></span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="w"> </span><span class="p">];</span>
|
||||
<span class="p">}</span>
|
||||
</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="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">observer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"mobx-react"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"react"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">ExamplePreferencesStore</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"./example-preference-store"</span><span class="p">;</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">observer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"mobx-react"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"react"</span><span class="p">;</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">ExamplePreferencesStore</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"./example-preference-store"</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">Component</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">Checkbox</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">Component</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">Checkbox</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">@observer</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExamplePreferenceInput</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="kd">@observer</span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExamplePreferenceInput</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="w"> </span><span class="p">{</span>
|
||||
|
||||
<span class="w"> </span><span class="nx">render</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">(</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">Checkbox</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">label</span><span class="o">=</span><span class="s2">"I understand appPreferences"</span><span class="w"></span>
|
||||
<span class="w"> </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="w"></span>
|
||||
<span class="w"> </span><span class="nx">onChange</span><span class="o">=</span><span class="p">{</span><span class="nx">v</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="p">{</span><span class="w"> </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="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">v</span><span class="p">;</span><span class="w"> </span><span class="p">}}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o">/></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">);</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">render</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">(</span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">Checkbox</span>
|
||||
<span class="w"> </span><span class="nx">label</span><span class="o">=</span><span class="s2">"I understand appPreferences"</span>
|
||||
<span class="w"> </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="w"> </span><span class="nx">onChange</span><span class="o">=</span><span class="p">{</span><span class="nx">v</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="p">{</span><span class="w"> </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="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">v</span><span class="p">;</span><span class="w"> </span><span class="p">}}</span>
|
||||
<span class="w"> </span><span class="o">/></span>
|
||||
<span class="w"> </span><span class="p">);</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExamplePreferenceHint</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">render</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">(</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">span</span><span class="o">></span><span class="nx">This</span><span class="w"> </span><span class="nx">is</span><span class="w"> </span><span class="nx">an</span><span class="w"> </span><span class="nx">example</span><span class="w"> </span><span class="k">of</span><span class="w"> </span><span class="nx">an</span><span class="w"> </span><span class="nx">appPreference</span><span class="w"> </span><span class="k">for</span><span class="w"> </span><span class="nx">extensions</span><span class="p">.</span><span class="o"><</span><span class="err">/span></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">);</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExamplePreferenceHint</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">render</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">(</span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">span</span><span class="o">></span><span class="nx">This</span><span class="w"> </span><span class="nx">is</span><span class="w"> </span><span class="nx">an</span><span class="w"> </span><span class="nx">example</span><span class="w"> </span><span class="k">of</span><span class="w"> </span><span class="nx">an</span><span class="w"> </span><span class="nx">appPreference</span><span class="w"> </span><span class="k">for</span><span class="w"> </span><span class="nx">extensions</span><span class="p">.</span><span class="o"><</span><span class="err">/span></span>
|
||||
<span class="w"> </span><span class="p">);</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>The only change here is that <code>ExamplePreferenceProps</code> defines its <code>preference</code> field as an <code>ExamplePreferencesStore</code> type.
|
||||
Everything else works as before, except that now the <code>enabled</code> state persists across Lens restarts because it is managed by the
|
||||
|
||||
Reference in new issue
Block a user