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
@@ -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.
|
||||
|
||||
Reference in new issue
Block a user