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
parent
cbc5266a16
commit
a341140e98
@ -1049,11 +1049,11 @@
|
||||
<p>If using the new style context, re-declare this in your class to be the
|
||||
<code>React.ContextType</code> of your <code>static contextType</code>.
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"></span>
|
||||
<span class="c1">// For TS pre-3.7:</span><span class="w"></span>
|
||||
<span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span><span class="w"></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span><span class="w"></span>
|
||||
<span class="kr">declare</span><span class="w"> </span><span class="nx">context</span><span class="o">:</span><span class="w"> </span><span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span><span class="w"> </span><span class="nx">context</span><span class="o">:</span><span class="w"> </span><span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>See</code></strong></p>
|
||||
<p>https://reactjs.org/docs/context.html</p>
|
||||
@ -1083,16 +1083,16 @@ Should be used with type annotation or static contextType.</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><<code>any</code>></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kt">number</span><span class="w"></span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kt">number</span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span><span class="w"> </span><span class="nx">Foo</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="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">Ctx</span><span class="o">></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">render</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="o"><></span><span class="nx">My</span><span class="w"> </span><span class="nx">context</span><span class="err">'</span><span class="nx">s</span><span class="w"> </span><span class="nx">value</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</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="p">}</span><span class="w"></span>
|
||||
<span class="kd">class</span><span class="w"> </span><span class="nx">Foo</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="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Ctx</span>
|
||||
<span class="w"> </span><span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="w"> </span><span class="nx">render</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="o"><></span><span class="nx">My</span><span class="w"> </span><span class="nx">context</span><span class="err">'</span><span class="nx">s</span><span class="w"> </span><span class="nx">value</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>See</code></strong></p>
|
||||
<p>https://reactjs.org/docs/context.html#classcontexttype</p>
|
||||
|
||||
@ -1199,11 +1199,11 @@
|
||||
<p>If using the new style context, re-declare this in your class to be the
|
||||
<code>React.ContextType</code> of your <code>static contextType</code>.
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"></span>
|
||||
<span class="c1">// For TS pre-3.7:</span><span class="w"></span>
|
||||
<span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span><span class="w"></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span><span class="w"></span>
|
||||
<span class="kr">declare</span><span class="w"> </span><span class="nx">context</span><span class="o">:</span><span class="w"> </span><span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span><span class="w"> </span><span class="nx">context</span><span class="o">:</span><span class="w"> </span><span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>See</code></strong></p>
|
||||
<p>https://reactjs.org/docs/context.html</p>
|
||||
@ -1242,16 +1242,16 @@ Should be used with type annotation or static contextType.</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><<code>any</code>></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kt">number</span><span class="w"></span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kt">number</span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span><span class="w"> </span><span class="nx">Foo</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="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">Ctx</span><span class="o">></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">render</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="o"><></span><span class="nx">My</span><span class="w"> </span><span class="nx">context</span><span class="err">'</span><span class="nx">s</span><span class="w"> </span><span class="nx">value</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</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="p">}</span><span class="w"></span>
|
||||
<span class="kd">class</span><span class="w"> </span><span class="nx">Foo</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="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Ctx</span>
|
||||
<span class="w"> </span><span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="w"> </span><span class="nx">render</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="o"><></span><span class="nx">My</span><span class="w"> </span><span class="nx">context</span><span class="err">'</span><span class="nx">s</span><span class="w"> </span><span class="nx">value</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>See</code></strong></p>
|
||||
<p>https://reactjs.org/docs/context.html#classcontexttype</p>
|
||||
|
||||
@ -1059,11 +1059,11 @@
|
||||
<p>If using the new style context, re-declare this in your class to be the
|
||||
<code>React.ContextType</code> of your <code>static contextType</code>.
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"></span>
|
||||
<span class="c1">// For TS pre-3.7:</span><span class="w"></span>
|
||||
<span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span><span class="w"></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span><span class="w"></span>
|
||||
<span class="kr">declare</span><span class="w"> </span><span class="nx">context</span><span class="o">:</span><span class="w"> </span><span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span><span class="w"> </span><span class="nx">context</span><span class="o">:</span><span class="w"> </span><span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>See</code></strong></p>
|
||||
<p>https://reactjs.org/docs/context.html</p>
|
||||
@ -1093,16 +1093,16 @@ Should be used with type annotation or static contextType.</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><<code>any</code>></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kt">number</span><span class="w"></span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kt">number</span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span><span class="w"> </span><span class="nx">Foo</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="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">Ctx</span><span class="o">></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">render</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="o"><></span><span class="nx">My</span><span class="w"> </span><span class="nx">context</span><span class="err">'</span><span class="nx">s</span><span class="w"> </span><span class="nx">value</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</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="p">}</span><span class="w"></span>
|
||||
<span class="kd">class</span><span class="w"> </span><span class="nx">Foo</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="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Ctx</span>
|
||||
<span class="w"> </span><span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="w"> </span><span class="nx">render</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="o"><></span><span class="nx">My</span><span class="w"> </span><span class="nx">context</span><span class="err">'</span><span class="nx">s</span><span class="w"> </span><span class="nx">value</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>See</code></strong></p>
|
||||
<p>https://reactjs.org/docs/context.html#classcontexttype</p>
|
||||
|
||||
@ -1040,11 +1040,11 @@
|
||||
<p>If using the new style context, re-declare this in your class to be the
|
||||
<code>React.ContextType</code> of your <code>static contextType</code>.
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"></span>
|
||||
<span class="c1">// For TS pre-3.7:</span><span class="w"></span>
|
||||
<span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span><span class="w"></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span><span class="w"></span>
|
||||
<span class="kr">declare</span><span class="w"> </span><span class="nx">context</span><span class="o">:</span><span class="w"> </span><span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span><span class="w"> </span><span class="nx">context</span><span class="o">:</span><span class="w"> </span><span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>See</code></strong></p>
|
||||
<p>https://reactjs.org/docs/context.html</p>
|
||||
@ -1074,16 +1074,16 @@ Should be used with type annotation or static contextType.</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><<code>any</code>></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kt">number</span><span class="w"></span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kt">number</span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span><span class="w"> </span><span class="nx">Foo</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="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">Ctx</span><span class="o">></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">render</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="o"><></span><span class="nx">My</span><span class="w"> </span><span class="nx">context</span><span class="err">'</span><span class="nx">s</span><span class="w"> </span><span class="nx">value</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</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="p">}</span><span class="w"></span>
|
||||
<span class="kd">class</span><span class="w"> </span><span class="nx">Foo</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="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Ctx</span>
|
||||
<span class="w"> </span><span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="w"> </span><span class="nx">render</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="o"><></span><span class="nx">My</span><span class="w"> </span><span class="nx">context</span><span class="err">'</span><span class="nx">s</span><span class="w"> </span><span class="nx">value</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>See</code></strong></p>
|
||||
<p>https://reactjs.org/docs/context.html#classcontexttype</p>
|
||||
|
||||
@ -1059,11 +1059,11 @@
|
||||
<p>If using the new style context, re-declare this in your class to be the
|
||||
<code>React.ContextType</code> of your <code>static contextType</code>.
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"></span>
|
||||
<span class="c1">// For TS pre-3.7:</span><span class="w"></span>
|
||||
<span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span><span class="w"></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span><span class="w"></span>
|
||||
<span class="kr">declare</span><span class="w"> </span><span class="nx">context</span><span class="o">:</span><span class="w"> </span><span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span><span class="w"> </span><span class="nx">context</span><span class="o">:</span><span class="w"> </span><span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>See</code></strong></p>
|
||||
<p>https://reactjs.org/docs/context.html</p>
|
||||
@ -1093,16 +1093,16 @@ Should be used with type annotation or static contextType.</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><<code>any</code>></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kt">number</span><span class="w"></span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kt">number</span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span><span class="w"> </span><span class="nx">Foo</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="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">Ctx</span><span class="o">></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">render</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="o"><></span><span class="nx">My</span><span class="w"> </span><span class="nx">context</span><span class="err">'</span><span class="nx">s</span><span class="w"> </span><span class="nx">value</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</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="p">}</span><span class="w"></span>
|
||||
<span class="kd">class</span><span class="w"> </span><span class="nx">Foo</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="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Ctx</span>
|
||||
<span class="w"> </span><span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="w"> </span><span class="nx">render</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="o"><></span><span class="nx">My</span><span class="w"> </span><span class="nx">context</span><span class="err">'</span><span class="nx">s</span><span class="w"> </span><span class="nx">value</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>See</code></strong></p>
|
||||
<p>https://reactjs.org/docs/context.html#classcontexttype</p>
|
||||
|
||||
@ -1049,11 +1049,11 @@
|
||||
<p>If using the new style context, re-declare this in your class to be the
|
||||
<code>React.ContextType</code> of your <code>static contextType</code>.
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"></span>
|
||||
<span class="c1">// For TS pre-3.7:</span><span class="w"></span>
|
||||
<span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span><span class="w"></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span><span class="w"></span>
|
||||
<span class="kr">declare</span><span class="w"> </span><span class="nx">context</span><span class="o">:</span><span class="w"> </span><span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span><span class="w"> </span><span class="nx">context</span><span class="o">:</span><span class="w"> </span><span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>See</code></strong></p>
|
||||
<p>https://reactjs.org/docs/context.html</p>
|
||||
@ -1083,16 +1083,16 @@ Should be used with type annotation or static contextType.</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><<code>any</code>></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kt">number</span><span class="w"></span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kt">number</span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span><span class="w"> </span><span class="nx">Foo</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="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">Ctx</span><span class="o">></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">render</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="o"><></span><span class="nx">My</span><span class="w"> </span><span class="nx">context</span><span class="err">'</span><span class="nx">s</span><span class="w"> </span><span class="nx">value</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</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="p">}</span><span class="w"></span>
|
||||
<span class="kd">class</span><span class="w"> </span><span class="nx">Foo</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="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Ctx</span>
|
||||
<span class="w"> </span><span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="w"> </span><span class="nx">render</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="o"><></span><span class="nx">My</span><span class="w"> </span><span class="nx">context</span><span class="err">'</span><span class="nx">s</span><span class="w"> </span><span class="nx">value</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>See</code></strong></p>
|
||||
<p>https://reactjs.org/docs/context.html#classcontexttype</p>
|
||||
|
||||
@ -1049,11 +1049,11 @@
|
||||
<p>If using the new style context, re-declare this in your class to be the
|
||||
<code>React.ContextType</code> of your <code>static contextType</code>.
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"></span>
|
||||
<span class="c1">// For TS pre-3.7:</span><span class="w"></span>
|
||||
<span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span><span class="w"></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span><span class="w"></span>
|
||||
<span class="kr">declare</span><span class="w"> </span><span class="nx">context</span><span class="o">:</span><span class="w"> </span><span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span><span class="w"> </span><span class="nx">context</span><span class="o">:</span><span class="w"> </span><span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>See</code></strong></p>
|
||||
<p>https://reactjs.org/docs/context.html</p>
|
||||
@ -1083,16 +1083,16 @@ Should be used with type annotation or static contextType.</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><<code>any</code>></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kt">number</span><span class="w"></span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kt">number</span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span><span class="w"> </span><span class="nx">Foo</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="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">Ctx</span><span class="o">></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">render</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="o"><></span><span class="nx">My</span><span class="w"> </span><span class="nx">context</span><span class="err">'</span><span class="nx">s</span><span class="w"> </span><span class="nx">value</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</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="p">}</span><span class="w"></span>
|
||||
<span class="kd">class</span><span class="w"> </span><span class="nx">Foo</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="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Ctx</span>
|
||||
<span class="w"> </span><span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="w"> </span><span class="nx">render</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="o"><></span><span class="nx">My</span><span class="w"> </span><span class="nx">context</span><span class="err">'</span><span class="nx">s</span><span class="w"> </span><span class="nx">value</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>See</code></strong></p>
|
||||
<p>https://reactjs.org/docs/context.html#classcontexttype</p>
|
||||
|
||||
@ -1041,11 +1041,11 @@
|
||||
<p>If using the new style context, re-declare this in your class to be the
|
||||
<code>React.ContextType</code> of your <code>static contextType</code>.
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"></span>
|
||||
<span class="c1">// For TS pre-3.7:</span><span class="w"></span>
|
||||
<span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span><span class="w"></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span><span class="w"></span>
|
||||
<span class="kr">declare</span><span class="w"> </span><span class="nx">context</span><span class="o">:</span><span class="w"> </span><span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span><span class="w"> </span><span class="nx">context</span><span class="o">:</span><span class="w"> </span><span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>See</code></strong></p>
|
||||
<p>https://reactjs.org/docs/context.html</p>
|
||||
@ -1075,16 +1075,16 @@ Should be used with type annotation or static contextType.</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><<code>any</code>></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kt">number</span><span class="w"></span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kt">number</span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span><span class="w"> </span><span class="nx">Foo</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="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">Ctx</span><span class="o">></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">render</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="o"><></span><span class="nx">My</span><span class="w"> </span><span class="nx">context</span><span class="err">'</span><span class="nx">s</span><span class="w"> </span><span class="nx">value</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</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="p">}</span><span class="w"></span>
|
||||
<span class="kd">class</span><span class="w"> </span><span class="nx">Foo</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="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Ctx</span>
|
||||
<span class="w"> </span><span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="w"> </span><span class="nx">render</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="o"><></span><span class="nx">My</span><span class="w"> </span><span class="nx">context</span><span class="err">'</span><span class="nx">s</span><span class="w"> </span><span class="nx">value</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>See</code></strong></p>
|
||||
<p>https://reactjs.org/docs/context.html#classcontexttype</p>
|
||||
|
||||
@ -1041,11 +1041,11 @@
|
||||
<p>If using the new style context, re-declare this in your class to be the
|
||||
<code>React.ContextType</code> of your <code>static contextType</code>.
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"></span>
|
||||
<span class="c1">// For TS pre-3.7:</span><span class="w"></span>
|
||||
<span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span><span class="w"></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span><span class="w"></span>
|
||||
<span class="kr">declare</span><span class="w"> </span><span class="nx">context</span><span class="o">:</span><span class="w"> </span><span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span><span class="w"> </span><span class="nx">context</span><span class="o">:</span><span class="w"> </span><span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>See</code></strong></p>
|
||||
<p>https://reactjs.org/docs/context.html</p>
|
||||
@ -1075,16 +1075,16 @@ Should be used with type annotation or static contextType.</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><<code>any</code>></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kt">number</span><span class="w"></span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kt">number</span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span><span class="w"> </span><span class="nx">Foo</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="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">Ctx</span><span class="o">></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">render</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="o"><></span><span class="nx">My</span><span class="w"> </span><span class="nx">context</span><span class="err">'</span><span class="nx">s</span><span class="w"> </span><span class="nx">value</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</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="p">}</span><span class="w"></span>
|
||||
<span class="kd">class</span><span class="w"> </span><span class="nx">Foo</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="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Ctx</span>
|
||||
<span class="w"> </span><span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="w"> </span><span class="nx">render</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="o"><></span><span class="nx">My</span><span class="w"> </span><span class="nx">context</span><span class="err">'</span><span class="nx">s</span><span class="w"> </span><span class="nx">value</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>See</code></strong></p>
|
||||
<p>https://reactjs.org/docs/context.html#classcontexttype</p>
|
||||
|
||||
@ -1040,11 +1040,11 @@
|
||||
<p>If using the new style context, re-declare this in your class to be the
|
||||
<code>React.ContextType</code> of your <code>static contextType</code>.
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"></span>
|
||||
<span class="c1">// For TS pre-3.7:</span><span class="w"></span>
|
||||
<span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span><span class="w"></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span><span class="w"></span>
|
||||
<span class="kr">declare</span><span class="w"> </span><span class="nx">context</span><span class="o">:</span><span class="w"> </span><span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span><span class="w"> </span><span class="nx">context</span><span class="o">:</span><span class="w"> </span><span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>See</code></strong></p>
|
||||
<p>https://reactjs.org/docs/context.html</p>
|
||||
@ -1074,16 +1074,16 @@ Should be used with type annotation or static contextType.</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><<code>any</code>></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kt">number</span><span class="w"></span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kt">number</span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span><span class="w"> </span><span class="nx">Foo</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="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">Ctx</span><span class="o">></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">render</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="o"><></span><span class="nx">My</span><span class="w"> </span><span class="nx">context</span><span class="err">'</span><span class="nx">s</span><span class="w"> </span><span class="nx">value</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</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="p">}</span><span class="w"></span>
|
||||
<span class="kd">class</span><span class="w"> </span><span class="nx">Foo</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="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Ctx</span>
|
||||
<span class="w"> </span><span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="w"> </span><span class="nx">render</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="o"><></span><span class="nx">My</span><span class="w"> </span><span class="nx">context</span><span class="err">'</span><span class="nx">s</span><span class="w"> </span><span class="nx">value</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>See</code></strong></p>
|
||||
<p>https://reactjs.org/docs/context.html#classcontexttype</p>
|
||||
|
||||
@ -1049,11 +1049,11 @@
|
||||
<p>If using the new style context, re-declare this in your class to be the
|
||||
<code>React.ContextType</code> of your <code>static contextType</code>.
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"></span>
|
||||
<span class="c1">// For TS pre-3.7:</span><span class="w"></span>
|
||||
<span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span><span class="w"></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span><span class="w"></span>
|
||||
<span class="kr">declare</span><span class="w"> </span><span class="nx">context</span><span class="o">:</span><span class="w"> </span><span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span><span class="w"> </span><span class="nx">context</span><span class="o">:</span><span class="w"> </span><span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>See</code></strong></p>
|
||||
<p>https://reactjs.org/docs/context.html</p>
|
||||
@ -1083,16 +1083,16 @@ Should be used with type annotation or static contextType.</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><<code>any</code>></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kt">number</span><span class="w"></span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kt">number</span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span><span class="w"> </span><span class="nx">Foo</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="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">Ctx</span><span class="o">></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">render</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="o"><></span><span class="nx">My</span><span class="w"> </span><span class="nx">context</span><span class="err">'</span><span class="nx">s</span><span class="w"> </span><span class="nx">value</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</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="p">}</span><span class="w"></span>
|
||||
<span class="kd">class</span><span class="w"> </span><span class="nx">Foo</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="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Ctx</span>
|
||||
<span class="w"> </span><span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="w"> </span><span class="nx">render</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="o"><></span><span class="nx">My</span><span class="w"> </span><span class="nx">context</span><span class="err">'</span><span class="nx">s</span><span class="w"> </span><span class="nx">value</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>See</code></strong></p>
|
||||
<p>https://reactjs.org/docs/context.html#classcontexttype</p>
|
||||
|
||||
@ -1087,11 +1087,11 @@
|
||||
<p>If using the new style context, re-declare this in your class to be the
|
||||
<code>React.ContextType</code> of your <code>static contextType</code>.
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"></span>
|
||||
<span class="c1">// For TS pre-3.7:</span><span class="w"></span>
|
||||
<span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span><span class="w"></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span><span class="w"></span>
|
||||
<span class="kr">declare</span><span class="w"> </span><span class="nx">context</span><span class="o">:</span><span class="w"> </span><span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span><span class="w"> </span><span class="nx">context</span><span class="o">:</span><span class="w"> </span><span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>See</code></strong></p>
|
||||
<p>https://reactjs.org/docs/context.html</p>
|
||||
@ -1121,16 +1121,16 @@ Should be used with type annotation or static contextType.</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><<code>any</code>></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kt">number</span><span class="w"></span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kt">number</span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span><span class="w"> </span><span class="nx">Foo</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="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">Ctx</span><span class="o">></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">render</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="o"><></span><span class="nx">My</span><span class="w"> </span><span class="nx">context</span><span class="err">'</span><span class="nx">s</span><span class="w"> </span><span class="nx">value</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</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="p">}</span><span class="w"></span>
|
||||
<span class="kd">class</span><span class="w"> </span><span class="nx">Foo</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="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Ctx</span>
|
||||
<span class="w"> </span><span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="w"> </span><span class="nx">render</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="o"><></span><span class="nx">My</span><span class="w"> </span><span class="nx">context</span><span class="err">'</span><span class="nx">s</span><span class="w"> </span><span class="nx">value</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>See</code></strong></p>
|
||||
<p>https://reactjs.org/docs/context.html#classcontexttype</p>
|
||||
|
||||
@ -1095,11 +1095,11 @@
|
||||
<p>If using the new style context, re-declare this in your class to be the
|
||||
<code>React.ContextType</code> of your <code>static contextType</code>.
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"></span>
|
||||
<span class="c1">// For TS pre-3.7:</span><span class="w"></span>
|
||||
<span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span><span class="w"></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span><span class="w"></span>
|
||||
<span class="kr">declare</span><span class="w"> </span><span class="nx">context</span><span class="o">:</span><span class="w"> </span><span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span><span class="w"> </span><span class="nx">context</span><span class="o">:</span><span class="w"> </span><span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>See</code></strong></p>
|
||||
<p>https://reactjs.org/docs/context.html</p>
|
||||
@ -1132,16 +1132,16 @@ Should be used with type annotation or static contextType.</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><<code>any</code>></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kt">number</span><span class="w"></span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kt">number</span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span><span class="w"> </span><span class="nx">Foo</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="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">Ctx</span><span class="o">></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">render</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="o"><></span><span class="nx">My</span><span class="w"> </span><span class="nx">context</span><span class="err">'</span><span class="nx">s</span><span class="w"> </span><span class="nx">value</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</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="p">}</span><span class="w"></span>
|
||||
<span class="kd">class</span><span class="w"> </span><span class="nx">Foo</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="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Ctx</span>
|
||||
<span class="w"> </span><span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="w"> </span><span class="nx">render</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="o"><></span><span class="nx">My</span><span class="w"> </span><span class="nx">context</span><span class="err">'</span><span class="nx">s</span><span class="w"> </span><span class="nx">value</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>See</code></strong></p>
|
||||
<p>https://reactjs.org/docs/context.html#classcontexttype</p>
|
||||
|
||||
@ -1138,11 +1138,11 @@
|
||||
<p>If using the new style context, re-declare this in your class to be the
|
||||
<code>React.ContextType</code> of your <code>static contextType</code>.
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"></span>
|
||||
<span class="c1">// For TS pre-3.7:</span><span class="w"></span>
|
||||
<span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span><span class="w"></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span><span class="w"></span>
|
||||
<span class="kr">declare</span><span class="w"> </span><span class="nx">context</span><span class="o">:</span><span class="w"> </span><span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span><span class="w"> </span><span class="nx">context</span><span class="o">:</span><span class="w"> </span><span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>See</code></strong></p>
|
||||
<p>https://reactjs.org/docs/context.html</p>
|
||||
@ -1181,16 +1181,16 @@ Should be used with type annotation or static contextType.</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><<code>any</code>></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kt">number</span><span class="w"></span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kt">number</span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span><span class="w"> </span><span class="nx">Foo</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="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">Ctx</span><span class="o">></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">render</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="o"><></span><span class="nx">My</span><span class="w"> </span><span class="nx">context</span><span class="err">'</span><span class="nx">s</span><span class="w"> </span><span class="nx">value</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</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="p">}</span><span class="w"></span>
|
||||
<span class="kd">class</span><span class="w"> </span><span class="nx">Foo</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="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Ctx</span>
|
||||
<span class="w"> </span><span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="w"> </span><span class="nx">render</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="o"><></span><span class="nx">My</span><span class="w"> </span><span class="nx">context</span><span class="err">'</span><span class="nx">s</span><span class="w"> </span><span class="nx">value</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>See</code></strong></p>
|
||||
<p>https://reactjs.org/docs/context.html#classcontexttype</p>
|
||||
|
||||
@ -1182,11 +1182,11 @@
|
||||
<p>If using the new style context, re-declare this in your class to be the
|
||||
<code>React.ContextType</code> of your <code>static contextType</code>.
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"></span>
|
||||
<span class="c1">// For TS pre-3.7:</span><span class="w"></span>
|
||||
<span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span><span class="w"></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span><span class="w"></span>
|
||||
<span class="kr">declare</span><span class="w"> </span><span class="nx">context</span><span class="o">:</span><span class="w"> </span><span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span><span class="w"> </span><span class="nx">context</span><span class="o">:</span><span class="w"> </span><span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>See</code></strong></p>
|
||||
<p>https://reactjs.org/docs/context.html</p>
|
||||
@ -1216,16 +1216,16 @@ Should be used with type annotation or static contextType.</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><<code>any</code>></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kt">number</span><span class="w"></span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kt">number</span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span><span class="w"> </span><span class="nx">Foo</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="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">Ctx</span><span class="o">></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">render</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="o"><></span><span class="nx">My</span><span class="w"> </span><span class="nx">context</span><span class="err">'</span><span class="nx">s</span><span class="w"> </span><span class="nx">value</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</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="p">}</span><span class="w"></span>
|
||||
<span class="kd">class</span><span class="w"> </span><span class="nx">Foo</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="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Ctx</span>
|
||||
<span class="w"> </span><span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="w"> </span><span class="nx">render</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="o"><></span><span class="nx">My</span><span class="w"> </span><span class="nx">context</span><span class="err">'</span><span class="nx">s</span><span class="w"> </span><span class="nx">value</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>See</code></strong></p>
|
||||
<p>https://reactjs.org/docs/context.html#classcontexttype</p>
|
||||
|
||||
@ -1041,11 +1041,11 @@
|
||||
<p>If using the new style context, re-declare this in your class to be the
|
||||
<code>React.ContextType</code> of your <code>static contextType</code>.
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"></span>
|
||||
<span class="c1">// For TS pre-3.7:</span><span class="w"></span>
|
||||
<span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span><span class="w"></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span><span class="w"></span>
|
||||
<span class="kr">declare</span><span class="w"> </span><span class="nx">context</span><span class="o">:</span><span class="w"> </span><span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span><span class="w"> </span><span class="nx">context</span><span class="o">:</span><span class="w"> </span><span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>See</code></strong></p>
|
||||
<p>https://reactjs.org/docs/context.html</p>
|
||||
@ -1075,16 +1075,16 @@ Should be used with type annotation or static contextType.</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><<code>any</code>></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kt">number</span><span class="w"></span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kt">number</span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span><span class="w"> </span><span class="nx">Foo</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="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">Ctx</span><span class="o">></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">render</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="o"><></span><span class="nx">My</span><span class="w"> </span><span class="nx">context</span><span class="err">'</span><span class="nx">s</span><span class="w"> </span><span class="nx">value</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</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="p">}</span><span class="w"></span>
|
||||
<span class="kd">class</span><span class="w"> </span><span class="nx">Foo</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="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Ctx</span>
|
||||
<span class="w"> </span><span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="w"> </span><span class="nx">render</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="o"><></span><span class="nx">My</span><span class="w"> </span><span class="nx">context</span><span class="err">'</span><span class="nx">s</span><span class="w"> </span><span class="nx">value</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>See</code></strong></p>
|
||||
<p>https://reactjs.org/docs/context.html#classcontexttype</p>
|
||||
|
||||
@ -1135,11 +1135,11 @@
|
||||
<p>If using the new style context, re-declare this in your class to be the
|
||||
<code>React.ContextType</code> of your <code>static contextType</code>.
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"></span>
|
||||
<span class="c1">// For TS pre-3.7:</span><span class="w"></span>
|
||||
<span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span><span class="w"></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span><span class="w"></span>
|
||||
<span class="kr">declare</span><span class="w"> </span><span class="nx">context</span><span class="o">:</span><span class="w"> </span><span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span><span class="w"> </span><span class="nx">context</span><span class="o">:</span><span class="w"> </span><span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>See</code></strong></p>
|
||||
<p>https://reactjs.org/docs/context.html</p>
|
||||
@ -1172,16 +1172,16 @@ Should be used with type annotation or static contextType.</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><<code>any</code>></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kt">number</span><span class="w"></span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span><span class="w"> </span><span class="nx">MyContext</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kt">number</span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span><span class="w"> </span><span class="nx">Foo</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="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Ctx</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">Ctx</span><span class="o">></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">render</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="o"><></span><span class="nx">My</span><span class="w"> </span><span class="nx">context</span><span class="err">'</span><span class="nx">s</span><span class="w"> </span><span class="nx">value</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</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="p">}</span><span class="w"></span>
|
||||
<span class="kd">class</span><span class="w"> </span><span class="nx">Foo</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="k">static</span><span class="w"> </span><span class="nx">contextType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Ctx</span>
|
||||
<span class="w"> </span><span class="nx">context</span><span class="o">!:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="w"> </span><span class="nx">render</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="o"><></span><span class="nx">My</span><span class="w"> </span><span class="nx">context</span><span class="err">'</span><span class="nx">s</span><span class="w"> </span><span class="nx">value</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>See</code></strong></p>
|
||||
<p>https://reactjs.org/docs/context.html#classcontexttype</p>
|
||||
|
||||
@ -1003,270 +1003,270 @@ It adds app menu items to the Lens UI.
|
||||
In order to see logs from this extension, you need to start Lens from the command line.</p>
|
||||
<h3 id="activate">Activate<a class="headerlink" href="#activate" title="Permanent link">#</a></h3>
|
||||
<p>This extension can register a custom callback that is executed when an extension is activated (started).</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="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="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="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"hello world"</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="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"hello world"</span><span class="p">)</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<h3 id="deactivate">Deactivate<a class="headerlink" href="#deactivate" title="Permanent link">#</a></h3>
|
||||
<p>This extension can register a custom callback that is executed when an extension is deactivated (stopped).</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="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="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">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">"bye bye"</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">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">"bye bye"</span><span class="p">)</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<h3 id="menus">Menus<a class="headerlink" href="#menus" title="Permanent link">#</a></h3>
|
||||
<p>This extension can register custom app and tray menus that will be displayed on OS native menus.</p>
|
||||
<p>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">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="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="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="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">"Example item"</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">Main</span><span class="p">.</span><span class="nx">Navigation</span><span class="p">.</span><span class="nx">navigate</span><span class="p">(</span><span class="s2">"https://k8slens.dev"</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">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="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">"Example item"</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">Main</span><span class="p">.</span><span class="nx">Navigation</span><span class="p">.</span><span class="nx">navigate</span><span class="p">(</span><span class="s2">"https://k8slens.dev"</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">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">"My links"</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="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">"Lens"</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">Main</span><span class="p">.</span><span class="nx">Navigation</span><span class="p">.</span><span class="nx">navigate</span><span class="p">(</span><span class="s2">"https://k8slens.dev"</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="kr">type</span><span class="o">:</span><span class="w"> </span><span class="s2">"separator"</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">label</span><span class="o">:</span><span class="w"> </span><span class="s2">"Lens Github"</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">Main</span><span class="p">.</span><span class="nx">Navigation</span><span class="p">.</span><span class="nx">navigate</span><span class="p">(</span><span class="s2">"https://github.com/lensapp/lens"</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="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">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">"My links"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="nx">submenu</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">"Lens"</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">Main</span><span class="p">.</span><span class="nx">Navigation</span><span class="p">.</span><span class="nx">navigate</span><span class="p">(</span><span class="s2">"https://k8slens.dev"</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="kr">type</span><span class="o">:</span><span class="w"> </span><span class="s2">"separator"</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">"Lens Github"</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">Main</span><span class="p">.</span><span class="nx">Navigation</span><span class="p">.</span><span class="nx">navigate</span><span class="p">(</span><span class="s2">"https://github.com/lensapp/lens"</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="p">}</span>
|
||||
<span class="w"> </span><span class="p">]</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<h2 id="renderer-extension">Renderer Extension<a class="headerlink" href="#renderer-extension" title="Permanent link">#</a></h2>
|
||||
<p>The renderer extension runs in a browser context, and is visible in Lens's main window.
|
||||
In order to see logs from this extension you need to check them via <strong>View</strong> > <strong>Toggle Developer Tools</strong> > <strong>Console</strong>.</p>
|
||||
<h3 id="activate_1">Activate<a class="headerlink" href="#activate_1" title="Permanent link">#</a></h3>
|
||||
<p>This extension can register a custom callback that is executed when an extension is activated (started).</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="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="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="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="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"hello world"</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="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="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"hello world"</span><span class="p">)</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<h3 id="deactivate_1">Deactivate<a class="headerlink" href="#deactivate_1" title="Permanent link">#</a></h3>
|
||||
<p>This extension can register a custom callback that is executed when an extension is deactivated (stopped).</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="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="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">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="k">async</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">"bye bye"</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">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">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">"bye bye"</span><span class="p">)</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<h3 id="global-pages">Global Pages<a class="headerlink" href="#global-pages" title="Permanent link">#</a></h3>
|
||||
<p>This extension can register custom global pages (views) to Lens's main window.
|
||||
The global page is a full-screen page that hides all other content from a window.</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="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="w"></span>
|
||||
<span class="k">import</span><span class="w"> </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">"./src/example-page"</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="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="k">import</span><span class="w"> </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">"./src/example-page"</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="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="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">"example"</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="kt">ExamplePage</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">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="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">"example"</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="kt">ExamplePage</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">globalPageMenus</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 page"</span><span class="p">,</span><span class="w"> </span><span class="c1">// used in icon's tooltip</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">"example"</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">Icon</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">Icon</span><span class="w"> </span><span class="nx">material</span><span class="o">=</span><span class="s2">"arrow"</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">globalPageMenus</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 page"</span><span class="p">,</span><span class="w"> </span><span class="c1">// used in icon's tooltip</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">"example"</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">Icon</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">Icon</span><span class="w"> </span><span class="nx">material</span><span class="o">=</span><span class="s2">"arrow"</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>
|
||||
<h3 id="app-preferences">App Preferences<a class="headerlink" href="#app-preferences" title="Permanent link">#</a></h3>
|
||||
<p>This extension can register custom app preferences.
|
||||
It is responsible for storing a state for custom preferences.</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="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="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">myCustomPreferencesStore</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/my-custom-preferences-store"</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">MyCustomPreferenceHint</span><span class="p">,</span><span class="w"> </span><span class="nx">MyCustomPreferenceInput</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/my-custom-preference"</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="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="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">myCustomPreferencesStore</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/my-custom-preferences-store"</span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">MyCustomPreferenceHint</span><span class="p">,</span><span class="w"> </span><span class="nx">MyCustomPreferenceInput</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/my-custom-preference"</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="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">"My Custom Preference"</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">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">MyCustomPreferenceHint</span><span class="o">/></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">MyCustomPreferenceInput</span><span class="w"> </span><span class="nx">store</span><span class="o">=</span><span class="p">{</span><span class="nx">myCustomPreferencesStore</span><span class="p">}</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="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="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">"My Custom Preference"</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">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">MyCustomPreferenceHint</span><span class="o">/></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">MyCustomPreferenceInput</span><span class="w"> </span><span class="nx">store</span><span class="o">=</span><span class="p">{</span><span class="nx">myCustomPreferencesStore</span><span class="p">}</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>
|
||||
<h3 id="cluster-pages">Cluster Pages<a class="headerlink" href="#cluster-pages" title="Permanent link">#</a></h3>
|
||||
<p>This extension can register custom cluster pages.
|
||||
These pages are visible in a cluster menu when a cluster is opened.</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="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">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">"./src/page"</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="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">"./src/page"</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">"extension-example"</span><span class="p">,</span><span class="w"> </span><span class="c1">// optional</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">exact</span><span class="o">:</span><span class="w"> </span><span class="kt">true</span><span class="p">,</span><span class="w"> </span><span class="c1">// optional</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="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">"extension-example"</span><span class="p">,</span><span class="w"> </span><span class="c1">// optional</span>
|
||||
<span class="w"> </span><span class="nx">exact</span><span class="o">:</span><span class="w"> </span><span class="kt">true</span><span class="p">,</span><span class="w"> </span><span class="c1">// optional</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="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">url</span><span class="o">:</span><span class="w"> </span><span class="s2">"/extension-example"</span><span class="p">,</span><span class="w"> </span><span class="c1">// optional</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 Extension"</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">url</span><span class="o">:</span><span class="w"> </span><span class="s2">"/extension-example"</span><span class="p">,</span><span class="w"> </span><span class="c1">// optional</span>
|
||||
<span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s2">"Example Extension"</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>
|
||||
<h3 id="top-bar-items">Top Bar Items<a class="headerlink" href="#top-bar-items" title="Permanent link">#</a></h3>
|
||||
<p>This extension can register custom components to a top bar area.</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="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="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">topBarItems</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">Icon</span><span class="w"> </span><span class="nx">material</span><span class="o">=</span><span class="s2">"favorite"</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">"/example-page"</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">topBarItems</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">Icon</span><span class="w"> </span><span class="nx">material</span><span class="o">=</span><span class="s2">"favorite"</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">"/example-page"</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>
|
||||
<h3 id="status-bar-items">Status Bar Items<a class="headerlink" href="#status-bar-items" title="Permanent link">#</a></h3>
|
||||
<p>This extension can register custom icons and text to a status bar area.</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="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="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">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="nx">className</span><span class="o">=</span><span class="s2">"flex align-center gaps hover-highlight"</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">"/example-page"</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="nx">Icon</span><span class="w"> </span><span class="nx">material</span><span class="o">=</span><span class="s2">"favorite"</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="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">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 hover-highlight"</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">"/example-page"</span><span class="p">)}</span><span class="w"> </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">"favorite"</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="w"> </span><span class="p">}</span>
|
||||
<span class="w"> </span><span class="p">]</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<h3 id="kubernetes-workloads-overview-items">Kubernetes Workloads Overview Items<a class="headerlink" href="#kubernetes-workloads-overview-items" title="Permanent link">#</a></h3>
|
||||
<p>This extension can register custom workloads overview items.</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="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">CustomWorkloadsOverviewItem</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/custom-workloads-overview-item"</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="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">CustomWorkloadsOverviewItem</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/custom-workloads-overview-item"</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">kubeWorkloadsOverviewItems</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">Details</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">CustomWorkloadsOverviewItem</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="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">kubeWorkloadsOverviewItems</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">Details</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">CustomWorkloadsOverviewItem</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="p">}</span>
|
||||
</code></pre></div>
|
||||
<h3 id="kubernetes-object-menu-items">Kubernetes Object Menu Items<a class="headerlink" href="#kubernetes-object-menu-items" title="Permanent link">#</a></h3>
|
||||
<p>This extension can register custom menu items (actions) for specified Kubernetes kinds/apiVersions.</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="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">CustomMenuItem</span><span class="p">,</span><span class="w"> </span><span class="nx">CustomMenuItemProps</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/custom-menu-item"</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="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">CustomMenuItem</span><span class="p">,</span><span class="w"> </span><span class="nx">CustomMenuItemProps</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/custom-menu-item"</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">"Node"</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">CustomMenuItemProps</span><span class="p">)</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="o"><</span><span class="nx">CustomMenuItem</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="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">"Node"</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">CustomMenuItemProps</span><span class="p">)</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="o"><</span><span class="nx">CustomMenuItem</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="p">}</span>
|
||||
</code></pre></div>
|
||||
<h3 id="kubernetes-object-details">Kubernetes Object Details<a class="headerlink" href="#kubernetes-object-details" title="Permanent link">#</a></h3>
|
||||
<p>This extension can register custom details (content) for specified Kubernetes kinds/apiVersions.</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="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">CustomKindDetails</span><span class="p">,</span><span class="w"> </span><span class="nx">CustomKindDetailsProps</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/custom-kind-details"</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="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">CustomKindDetails</span><span class="p">,</span><span class="w"> </span><span class="nx">CustomKindDetailsProps</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/custom-kind-details"</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">"CustomKind"</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">"custom.acme.org/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">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">CustomKindDetailsProps</span><span class="p">)</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="o"><</span><span class="nx">CustomKindDetails</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="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">"CustomKind"</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">"custom.acme.org/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">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">CustomKindDetailsProps</span><span class="p">)</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="o"><</span><span class="nx">CustomKindDetails</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="p">}</span>
|
||||
</code></pre></div>
|
||||
|
||||
|
||||
|
||||
@ -903,27 +903,27 @@
|
||||
For example, consider the following HTML and its associated CSS properties:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="p"><</span><span class="nt">div</span> <span class="na">className</span><span class="o">=</span><span class="s">"flex column align-center"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
|
||||
</code></pre></div>
|
||||
<div class="highlight"><pre><span></span><code><span class="nt">div</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">display</span><span class="p">:</span><span class="w"> </span><span class="kc">flex</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">flex-direction</span><span class="p">:</span><span class="w"> </span><span class="kc">column</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">align-items</span><span class="p">:</span><span class="w"> </span><span class="kc">center</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="nt">div</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="k">display</span><span class="p">:</span><span class="w"> </span><span class="kc">flex</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="k">flex-direction</span><span class="p">:</span><span class="w"> </span><span class="kc">column</span><span class="p">;</span>
|
||||
<span class="w"> </span><span class="k">align-items</span><span class="p">:</span><span class="w"> </span><span class="kc">center</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>However, you are free to use any styling technique or framework you like, including <a href="https://github.com/emotion-js/emotion">Emotion</a> or even plain CSS.</p>
|
||||
<h3 id="layout-variables">Layout Variables<a class="headerlink" href="#layout-variables" title="Permanent link">#</a></h3>
|
||||
<p>There is a set of CSS variables available for for basic layout needs.
|
||||
They are located inside <code>:root</code> and are defined in <a href="https://github.com/lensapp/lens/blob/master/src/renderer/components/app.scss">app.scss</a>:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="nt">--unit</span><span class="o">:</span><span class="w"> </span><span class="nt">8px</span><span class="o">;</span><span class="w"></span>
|
||||
<span class="nt">--padding</span><span class="o">:</span><span class="w"> </span><span class="nt">var</span><span class="o">(</span><span class="nt">--unit</span><span class="o">);</span><span class="w"></span>
|
||||
<span class="nt">--margin</span><span class="o">:</span><span class="w"> </span><span class="nt">var</span><span class="o">(</span><span class="nt">--unit</span><span class="o">);</span><span class="w"></span>
|
||||
<span class="nt">--border-radius</span><span class="o">:</span><span class="w"> </span><span class="nt">3px</span><span class="o">;</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="nt">--unit</span><span class="o">:</span><span class="w"> </span><span class="nt">8px</span><span class="o">;</span>
|
||||
<span class="nt">--padding</span><span class="o">:</span><span class="w"> </span><span class="nt">var</span><span class="o">(</span><span class="nt">--unit</span><span class="o">);</span>
|
||||
<span class="nt">--margin</span><span class="o">:</span><span class="w"> </span><span class="nt">var</span><span class="o">(</span><span class="nt">--unit</span><span class="o">);</span>
|
||||
<span class="nt">--border-radius</span><span class="o">:</span><span class="w"> </span><span class="nt">3px</span><span class="o">;</span>
|
||||
</code></pre></div>
|
||||
<p>These variables are intended to set consistent margins and paddings across components.
|
||||
For example:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="p">.</span><span class="nc">status</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">padding-left</span><span class="p">:</span><span class="w"> </span><span class="nb">calc</span><span class="p">(</span><span class="nf">var</span><span class="p">(</span><span class="nv">--padding</span><span class="p">)</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="mi">2</span><span class="p">);</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">border-radius</span><span class="p">:</span><span class="w"> </span><span class="nf">var</span><span class="p">(</span><span class="nv">--border-radius</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="nc">status</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="k">padding-left</span><span class="p">:</span><span class="w"> </span><span class="nb">calc</span><span class="p">(</span><span class="nf">var</span><span class="p">(</span><span class="nv">--padding</span><span class="p">)</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="mi">2</span><span class="p">);</span>
|
||||
<span class="w"> </span><span class="k">border-radius</span><span class="p">:</span><span class="w"> </span><span class="nf">var</span><span class="p">(</span><span class="nv">--border-radius</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<h2 id="themes">Themes<a class="headerlink" href="#themes" title="Permanent link">#</a></h2>
|
||||
<p>Lens uses two built-in themes defined in <a href="https://github.com/lensapp/lens/tree/master/src/renderer/themes">the themes directory</a> – one light and one dark.</p>
|
||||
@ -935,14 +935,14 @@ This list then gets injected into the <code>:root</code> element so that any of
|
||||
<p>If you want to preserve Lens's native look and feel, with respect to the lightness or darkness of your extension, you can use the provided variables and built-in Lens components such as <code>Button</code>, <code>Select</code>, <code>Table</code>, and so on.</p>
|
||||
<p>There is a set of CSS variables available for extensions to use for theming.
|
||||
They are all located inside <code>:root</code> and are defined in <a href="https://github.com/lensapp/lens/blob/master/src/renderer/components/app.scss">app.scss</a>:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="nt">--font-main</span><span class="o">:</span><span class="w"> </span><span class="s1">'Roboto'</span><span class="o">,</span><span class="w"> </span><span class="s1">'Helvetica'</span><span class="o">,</span><span class="w"> </span><span class="s1">'Arial'</span><span class="o">,</span><span class="w"> </span><span class="nt">sans-serif</span><span class="o">;</span><span class="w"></span>
|
||||
<span class="nt">--font-monospace</span><span class="o">:</span><span class="w"> </span><span class="nt">Lucida</span><span class="w"> </span><span class="nt">Console</span><span class="o">,</span><span class="w"> </span><span class="nt">Monaco</span><span class="o">,</span><span class="w"> </span><span class="nt">Consolas</span><span class="o">,</span><span class="w"> </span><span class="nt">monospace</span><span class="o">;</span><span class="w"></span>
|
||||
<span class="nt">--font-size-small</span><span class="o">:</span><span class="w"> </span><span class="nt">calc</span><span class="o">(</span><span class="nt">1</span><span class="p">.</span><span class="nc">5</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nt">var</span><span class="o">(</span><span class="nt">--unit</span><span class="o">));</span><span class="w"></span>
|
||||
<span class="nt">--font-size</span><span class="o">:</span><span class="w"> </span><span class="nt">calc</span><span class="o">(</span><span class="nt">1</span><span class="p">.</span><span class="nc">75</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nt">var</span><span class="o">(</span><span class="nt">--unit</span><span class="o">));</span><span class="w"></span>
|
||||
<span class="nt">--font-size-big</span><span class="o">:</span><span class="w"> </span><span class="nt">calc</span><span class="o">(</span><span class="nt">2</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nt">var</span><span class="o">(</span><span class="nt">--unit</span><span class="o">));</span><span class="w"></span>
|
||||
<span class="nt">--font-weight-thin</span><span class="o">:</span><span class="w"> </span><span class="nt">300</span><span class="o">;</span><span class="w"></span>
|
||||
<span class="nt">--font-weight-normal</span><span class="o">:</span><span class="w"> </span><span class="nt">400</span><span class="o">;</span><span class="w"></span>
|
||||
<span class="nt">--font-weight-bold</span><span class="o">:</span><span class="w"> </span><span class="nt">500</span><span class="o">;</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="nt">--font-main</span><span class="o">:</span><span class="w"> </span><span class="s1">'Roboto'</span><span class="o">,</span><span class="w"> </span><span class="s1">'Helvetica'</span><span class="o">,</span><span class="w"> </span><span class="s1">'Arial'</span><span class="o">,</span><span class="w"> </span><span class="nt">sans-serif</span><span class="o">;</span>
|
||||
<span class="nt">--font-monospace</span><span class="o">:</span><span class="w"> </span><span class="nt">Lucida</span><span class="w"> </span><span class="nt">Console</span><span class="o">,</span><span class="w"> </span><span class="nt">Monaco</span><span class="o">,</span><span class="w"> </span><span class="nt">Consolas</span><span class="o">,</span><span class="w"> </span><span class="nt">monospace</span><span class="o">;</span>
|
||||
<span class="nt">--font-size-small</span><span class="o">:</span><span class="w"> </span><span class="nt">calc</span><span class="o">(</span><span class="nt">1</span><span class="p">.</span><span class="nc">5</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nt">var</span><span class="o">(</span><span class="nt">--unit</span><span class="o">));</span>
|
||||
<span class="nt">--font-size</span><span class="o">:</span><span class="w"> </span><span class="nt">calc</span><span class="o">(</span><span class="nt">1</span><span class="p">.</span><span class="nc">75</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nt">var</span><span class="o">(</span><span class="nt">--unit</span><span class="o">));</span>
|
||||
<span class="nt">--font-size-big</span><span class="o">:</span><span class="w"> </span><span class="nt">calc</span><span class="o">(</span><span class="nt">2</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nt">var</span><span class="o">(</span><span class="nt">--unit</span><span class="o">));</span>
|
||||
<span class="nt">--font-weight-thin</span><span class="o">:</span><span class="w"> </span><span class="nt">300</span><span class="o">;</span>
|
||||
<span class="nt">--font-weight-normal</span><span class="o">:</span><span class="w"> </span><span class="nt">400</span><span class="o">;</span>
|
||||
<span class="nt">--font-weight-bold</span><span class="o">:</span><span class="w"> </span><span class="nt">500</span><span class="o">;</span>
|
||||
</code></pre></div>
|
||||
<p>as well as in <a href="https://github.com/lensapp/lens/tree/master/src/renderer/themes">the theme modules</a>:</p>
|
||||
<div class="highlight"><pre><span></span><code>--blue: #3d90ce;
|
||||
@ -965,30 +965,30 @@ They are all located inside <code>:root</code> and are defined in <a href="https
|
||||
</code></pre></div>
|
||||
<p>These variables can be used in the following form: <code>var(--magenta)</code>.
|
||||
For example:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="p">.</span><span class="nc">status</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">font-size</span><span class="p">:</span><span class="w"> </span><span class="nf">var</span><span class="p">(</span><span class="nv">--font-size-small</span><span class="p">);</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="nf">var</span><span class="p">(</span><span class="nv">--colorSuccess</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="nc">status</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="k">font-size</span><span class="p">:</span><span class="w"> </span><span class="nf">var</span><span class="p">(</span><span class="nv">--font-size-small</span><span class="p">);</span>
|
||||
<span class="w"> </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="nf">var</span><span class="p">(</span><span class="nv">--colorSuccess</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<h3 id="theme-switching">Theme Switching<a class="headerlink" href="#theme-switching" title="Permanent link">#</a></h3>
|
||||
<p>When the light theme is active, the <code><body></code> element gets a "theme-light" class, or: <code><body class="theme-light"></code>.
|
||||
If the class isn't there, the theme defaults to dark. The active theme can be changed in the <strong>Preferences</strong> page:
|
||||
<img alt="Color Theme" src="../images/theme-selector.png" /></p>
|
||||
<p>There is a way of detect active theme and its changes in JS. <a href="https://github.com/mobxjs/mobx-react#observercomponent">MobX observer function/decorator</a> can be used for this purpose.</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="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="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="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="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="err">@</span><span class="nx">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">SupportPage</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">div</span><span class="w"> </span><span class="nx">className</span><span class="o">=</span><span class="s2">"SupportPage"</span><span class="o">></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">h1</span><span class="o">></span><span class="nx">Active</span><span class="w"> </span><span class="nx">theme</span><span class="w"> </span><span class="nx">is</span><span class="w"> </span><span class="p">{</span><span class="nx">Renderer</span><span class="p">.</span><span class="nx">Theme</span><span class="p">.</span><span class="nx">getActiveTheme</span><span class="p">().</span><span class="nx">name</span><span class="p">}</span><span class="o"><</span><span class="err">/h1></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="err">@</span><span class="nx">observer</span>
|
||||
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">SupportPage</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">div</span><span class="w"> </span><span class="nx">className</span><span class="o">=</span><span class="s2">"SupportPage"</span><span class="o">></span>
|
||||
<span class="w"> </span><span class="o"><</span><span class="nx">h1</span><span class="o">></span><span class="nx">Active</span><span class="w"> </span><span class="nx">theme</span><span class="w"> </span><span class="nx">is</span><span class="w"> </span><span class="p">{</span><span class="nx">Renderer</span><span class="p">.</span><span class="nx">Theme</span><span class="p">.</span><span class="nx">getActiveTheme</span><span class="p">().</span><span class="nx">name</span><span class="p">}</span><span class="o"><</span><span class="err">/h1></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>Theme</code> entity from <code>@k8slens/extensions</code> provides active theme object and <code>@observer</code> decorator makes component reactive - so it will rerender each time any of the observables (active theme in our case) will be changed.</p>
|
||||
<p>Working example provided in <a href="https://github.com/lensapp/lens-extension-samples/tree/master/styling-emotion-sample">Styling with Emotion</a> sample extension.</p>
|
||||
@ -1004,9 +1004,9 @@ If the class isn't there, the theme defaults to dark. The active theme can be ch
|
||||
<p>Extensions may overwrite these defaults if needed. They have low CSS specificity, so overriding them should be fairly easy.</p>
|
||||
<h2 id="css-in-js">CSS-in-JS<a class="headerlink" href="#css-in-js" title="Permanent link">#</a></h2>
|
||||
<p>If an extension uses a system like <code>Emotion</code> to work with styles, it can use CSS variables as follows:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">const</span><span class="w"> </span><span class="nx">Container</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">styled</span><span class="p">.</span><span class="nx">div</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">backgroundColor</span><span class="o">:</span><span class="w"> </span><span class="s1">'var(--mainBackground)'</span><span class="w"></span>
|
||||
<span class="p">}));</span><span class="w"></span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">const</span><span class="w"> </span><span class="nx">Container</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">styled</span><span class="p">.</span><span class="nx">div</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">backgroundColor</span><span class="o">:</span><span class="w"> </span><span class="s1">'var(--mainBackground)'</span>
|
||||
<span class="p">}));</span>
|
||||
</code></pre></div>
|
||||
<h2 id="examples">Examples<a class="headerlink" href="#examples" title="Permanent link">#</a></h2>
|
||||
<p>You can explore samples for each styling technique that you can use for extensions:</p>
|
||||
|
||||
@ -868,36 +868,36 @@ Some of the most-important fields include:</p>
|
||||
We only support the <code>^</code> range, which is also optional to specify, and only major and minor version numbers.
|
||||
Meaning that <code>^5.4</code> and <code>5.4</code> both mean the same thing, and the patch version in <code>5.4.2</code> is ignored.</li>
|
||||
</ul>
|
||||
<div class="highlight"><pre><span></span><code><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s2">"name"</span><span class="o">:</span><span class="w"> </span><span class="s2">"helloworld-sample"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s2">"publisher"</span><span class="o">:</span><span class="w"> </span><span class="s2">"lens-samples"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s2">"version"</span><span class="o">:</span><span class="w"> </span><span class="s2">"0.0.1"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s2">"description"</span><span class="o">:</span><span class="w"> </span><span class="s2">"Lens helloworld-sample"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s2">"license"</span><span class="o">:</span><span class="w"> </span><span class="s2">"MIT"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s2">"homepage"</span><span class="o">:</span><span class="w"> </span><span class="s2">"https://github.com/lensapp/lens-extension-samples"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s2">"engines"</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s2">"node"</span><span class="o">:</span><span class="w"> </span><span class="s2">"^16.14.2"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s2">"lens"</span><span class="o">:</span><span class="w"> </span><span class="s2">"5.4"</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s2">"main"</span><span class="o">:</span><span class="w"> </span><span class="s2">"dist/main.js"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s2">"renderer"</span><span class="o">:</span><span class="w"> </span><span class="s2">"dist/renderer.js"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s2">"scripts"</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s2">"build"</span><span class="o">:</span><span class="w"> </span><span class="s2">"webpack --config webpack.config.js"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s2">"dev"</span><span class="o">:</span><span class="w"> </span><span class="s2">"npm run build --watch"</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s2">"dependencies"</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s2">"react-open-doodles"</span><span class="o">:</span><span class="w"> </span><span class="s2">"^1.0.5"</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s2">"devDependencies"</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="o">:</span><span class="w"> </span><span class="s2">"^5.4.6"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s2">"ts-loader"</span><span class="o">:</span><span class="w"> </span><span class="s2">"^8.0.4"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s2">"typescript"</span><span class="o">:</span><span class="w"> </span><span class="s2">"^4.5.5"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s2">"@types/react"</span><span class="o">:</span><span class="w"> </span><span class="s2">"^17.0.44"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s2">"@types/node"</span><span class="o">:</span><span class="w"> </span><span class="s2">"^16.14.2"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s2">"webpack"</span><span class="o">:</span><span class="w"> </span><span class="s2">"^4.44.2"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s2">"webpack-cli"</span><span class="o">:</span><span class="w"> </span><span class="s2">"^3.3.11"</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="s2">"name"</span><span class="o">:</span><span class="w"> </span><span class="s2">"helloworld-sample"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="s2">"publisher"</span><span class="o">:</span><span class="w"> </span><span class="s2">"lens-samples"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="s2">"version"</span><span class="o">:</span><span class="w"> </span><span class="s2">"0.0.1"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="s2">"description"</span><span class="o">:</span><span class="w"> </span><span class="s2">"Lens helloworld-sample"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="s2">"license"</span><span class="o">:</span><span class="w"> </span><span class="s2">"MIT"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="s2">"homepage"</span><span class="o">:</span><span class="w"> </span><span class="s2">"https://github.com/lensapp/lens-extension-samples"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="s2">"engines"</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="s2">"node"</span><span class="o">:</span><span class="w"> </span><span class="s2">"^16.14.2"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="s2">"lens"</span><span class="o">:</span><span class="w"> </span><span class="s2">"5.4"</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="s2">"main"</span><span class="o">:</span><span class="w"> </span><span class="s2">"dist/main.js"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="s2">"renderer"</span><span class="o">:</span><span class="w"> </span><span class="s2">"dist/renderer.js"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="s2">"scripts"</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="s2">"build"</span><span class="o">:</span><span class="w"> </span><span class="s2">"webpack --config webpack.config.js"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="s2">"dev"</span><span class="o">:</span><span class="w"> </span><span class="s2">"npm run build --watch"</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="s2">"dependencies"</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="s2">"react-open-doodles"</span><span class="o">:</span><span class="w"> </span><span class="s2">"^1.0.5"</span>
|
||||
<span class="w"> </span><span class="p">},</span>
|
||||
<span class="w"> </span><span class="s2">"devDependencies"</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="o">:</span><span class="w"> </span><span class="s2">"^5.4.6"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="s2">"ts-loader"</span><span class="o">:</span><span class="w"> </span><span class="s2">"^8.0.4"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="s2">"typescript"</span><span class="o">:</span><span class="w"> </span><span class="s2">"^4.5.5"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="s2">"@types/react"</span><span class="o">:</span><span class="w"> </span><span class="s2">"^17.0.44"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="s2">"@types/node"</span><span class="o">:</span><span class="w"> </span><span class="s2">"^16.14.2"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="s2">"webpack"</span><span class="o">:</span><span class="w"> </span><span class="s2">"^4.44.2"</span><span class="p">,</span>
|
||||
<span class="w"> </span><span class="s2">"webpack-cli"</span><span class="o">:</span><span class="w"> </span><span class="s2">"^3.3.11"</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<h2 id="webpack-configuration">Webpack configuration<a class="headerlink" href="#webpack-configuration" title="Permanent link">#</a></h2>
|
||||
<p>The following webpack <code>externals</code> are provided by <code>Lens</code> and must be used (when available) to make sure that the versions used are in sync.</p>
|
||||
@ -958,20 +958,20 @@ Some of the most-important fields include:</p>
|
||||
</table>
|
||||
<p>What is exported is the whole of the packages as a <code>*</code> import (within typescript).</p>
|
||||
<p>For example, the following is how you would specify these within your webpack configuration files.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="err">...</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nt">"externals"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w"></span>
|
||||
<span class="w"> </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="nt">"mobx"</span><span class="p">:</span><span class="w"> </span><span class="nt">"var global.Mobx"</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nt">"mobx-react"</span><span class="p">:</span><span class="w"> </span><span class="nt">"var global.MobxReact"</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nt">"react"</span><span class="p">:</span><span class="w"> </span><span class="nt">"var global.React"</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nt">"react-router"</span><span class="p">:</span><span class="w"> </span><span class="nt">"var global.ReactRouter"</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nt">"react-router-dom"</span><span class="p">:</span><span class="w"> </span><span class="nt">"var global.ReactRouterDom"</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nt">"react-dom"</span><span class="p">:</span><span class="w"> </span><span class="s2">"var global.ReactDOM"</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="p">{</span>
|
||||
<span class="w"> </span><span class="err">...</span>
|
||||
<span class="w"> </span><span class="nt">"externals"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span>
|
||||
<span class="w"> </span><span class="err">...</span>
|
||||
<span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nt">"mobx"</span><span class="p">:</span><span class="w"> </span><span class="nt">"var global.Mobx"</span>
|
||||
<span class="w"> </span><span class="nt">"mobx-react"</span><span class="p">:</span><span class="w"> </span><span class="nt">"var global.MobxReact"</span>
|
||||
<span class="w"> </span><span class="nt">"react"</span><span class="p">:</span><span class="w"> </span><span class="nt">"var global.React"</span>
|
||||
<span class="w"> </span><span class="nt">"react-router"</span><span class="p">:</span><span class="w"> </span><span class="nt">"var global.ReactRouter"</span>
|
||||
<span class="w"> </span><span class="nt">"react-router-dom"</span><span class="p">:</span><span class="w"> </span><span class="nt">"var global.ReactRouterDom"</span>
|
||||
<span class="w"> </span><span class="nt">"react-dom"</span><span class="p">:</span><span class="w"> </span><span class="s2">"var global.ReactDOM"</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="w"> </span><span class="p">]</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<h2 id="extension-entry-files">Extension Entry Files<a class="headerlink" href="#extension-entry-files" title="Permanent link">#</a></h2>
|
||||
<p>Lens extensions can have two separate entry files.
|
||||
@ -988,20 +988,20 @@ On the <code>renderer</code> entry point, the Hello World sample extension defin
|
||||
The <code>Cluster Page</code> object registers the <code>/extension-example</code> path, and this path renders the <code>ExamplePage</code> React component.
|
||||
It also registers the <code>MenuItem</code> component that displays the <code>ExampleIcon</code> React component and the "Hello World" text in the left-side menu of the cluster dashboard.
|
||||
These React components are defined in the additional <code>./src/page.tsx</code> file.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@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">"extension-example"</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">"extension-example"</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>The Hello World sample extension uses the <code>Cluster Page</code> capability, which is just one of the Lens extension API's capabilities.
|
||||
The <a href="../../capabilities/common-capabilities/">Common Capabilities</a> page will help you home in on the right capabilities to use with your own extensions.</p>
|
||||
|
||||
@ -878,41 +878,41 @@
|
||||
<p>In this topic, you'll learn the basics of building extensions by creating an extension that adds a "Hello World" page to a cluster menu.</p>
|
||||
<h2 id="install-the-extension">Install the Extension<a class="headerlink" href="#install-the-extension" title="Permanent link">#</a></h2>
|
||||
<p>To install the extension, clone the <a href="https://github.com/lensapp/lens-extension-samples">Lens Extension samples</a> repository to your local machine:</p>
|
||||
<div class="highlight"><pre><span></span><code>git clone https://github.com/lensapp/lens-extension-samples.git
|
||||
<div class="highlight"><pre><span></span><code>git<span class="w"> </span>clone<span class="w"> </span>https://github.com/lensapp/lens-extension-samples.git
|
||||
</code></pre></div>
|
||||
<p>Next you need to create a symlink.
|
||||
A symlink connects the directory that Lens will monitor for user-installed extensions to the sample extension.
|
||||
In this case the sample extension is <code>helloworld-sample</code>.</p>
|
||||
<h3 id="linux-macos">Linux & macOS<a class="headerlink" href="#linux-macos" title="Permanent link">#</a></h3>
|
||||
<div class="highlight"><pre><span></span><code>mkdir -p ~/.k8slens/extensions
|
||||
<span class="nb">cd</span> ~/.k8slens/extensions
|
||||
ln -s lens-extension-samples/helloworld-sample helloworld-sample
|
||||
<div class="highlight"><pre><span></span><code>mkdir<span class="w"> </span>-p<span class="w"> </span>~/.k8slens/extensions
|
||||
<span class="nb">cd</span><span class="w"> </span>~/.k8slens/extensions
|
||||
ln<span class="w"> </span>-s<span class="w"> </span>lens-extension-samples/helloworld-sample<span class="w"> </span>helloworld-sample
|
||||
</code></pre></div>
|
||||
<h3 id="windows">Windows<a class="headerlink" href="#windows" title="Permanent link">#</a></h3>
|
||||
<p>Create the directory that Lens will monitor for user-installed extensions:</p>
|
||||
<div class="highlight"><pre><span></span><code>mkdir C:<span class="se">\U</span>sers<span class="se">\<</span>user><span class="se">\.</span>k8slens<span class="se">\e</span>xtensions -force
|
||||
<span class="nb">cd</span> C:<span class="se">\U</span>sers<span class="se">\<</span>user><span class="se">\.</span>k8slens<span class="se">\e</span>xtensions
|
||||
<div class="highlight"><pre><span></span><code>mkdir<span class="w"> </span>C:<span class="se">\U</span>sers<span class="se">\<</span>user><span class="se">\.</span>k8slens<span class="se">\e</span>xtensions<span class="w"> </span>-force
|
||||
<span class="nb">cd</span><span class="w"> </span>C:<span class="se">\U</span>sers<span class="se">\<</span>user><span class="se">\.</span>k8slens<span class="se">\e</span>xtensions
|
||||
</code></pre></div>
|
||||
<p>If you have administrator rights, you can create symlink to the sample extension – in this case <code>helloworld-sample</code>:</p>
|
||||
<div class="highlight"><pre><span></span><code>cmd /c mklink /D helloworld-sample lens-extension-samples<span class="se">\h</span>elloworld-sample
|
||||
<div class="highlight"><pre><span></span><code>cmd<span class="w"> </span>/c<span class="w"> </span>mklink<span class="w"> </span>/D<span class="w"> </span>helloworld-sample<span class="w"> </span>lens-extension-samples<span class="se">\h</span>elloworld-sample
|
||||
</code></pre></div>
|
||||
<p>Without administrator rights, you need to copy the extensions sample directory into <code>C:\Users\<user>\.k8slens\extensions</code>:</p>
|
||||
<div class="highlight"><pre><span></span><code>Copy-Item <span class="s1">'lens-extension-samples\helloworld-sample'</span> <span class="s1">'C:\Users\<user>\.k8slens\extensions\helloworld-sample'</span>
|
||||
<div class="highlight"><pre><span></span><code>Copy-Item<span class="w"> </span><span class="s1">'lens-extension-samples\helloworld-sample'</span><span class="w"> </span><span class="s1">'C:\Users\<user>\.k8slens\extensions\helloworld-sample'</span>
|
||||
</code></pre></div>
|
||||
<h2 id="build-the-extension">Build the Extension<a class="headerlink" href="#build-the-extension" title="Permanent link">#</a></h2>
|
||||
<p>To build the extension you can use <code>make</code> or run the <code>npm</code> commands manually:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="nb">cd</span> <lens-extension-samples directory>/helloworld-sample
|
||||
make build
|
||||
<div class="highlight"><pre><span></span><code><span class="nb">cd</span><span class="w"> </span><lens-extension-samples<span class="w"> </span>directory>/helloworld-sample
|
||||
make<span class="w"> </span>build
|
||||
</code></pre></div>
|
||||
<p>To run the <code>npm</code> commands, enter:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="nb">cd</span> <lens-extension-samples directory>/helloworld-sample
|
||||
npm install
|
||||
npm run build
|
||||
<div class="highlight"><pre><span></span><code><span class="nb">cd</span><span class="w"> </span><lens-extension-samples<span class="w"> </span>directory>/helloworld-sample
|
||||
npm<span class="w"> </span>install
|
||||
npm<span class="w"> </span>run<span class="w"> </span>build
|
||||
</code></pre></div>
|
||||
<p>Optionally, automatically rebuild the extension by watching for changes to the source code.
|
||||
To do so, enter:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="nb">cd</span> <lens-extension-samples directory>/helloworld-sample
|
||||
npm run dev
|
||||
<div class="highlight"><pre><span></span><code><span class="nb">cd</span><span class="w"> </span><lens-extension-samples<span class="w"> </span>directory>/helloworld-sample
|
||||
npm<span class="w"> </span>run<span class="w"> </span>dev
|
||||
</code></pre></div>
|
||||
<p>You must restart Lens for the extension to load.
|
||||
After this initial restart, reload Lens and it will automatically pick up changes any time the extension rebuilds.</p>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -845,7 +845,7 @@ Once you have set up an account with NPM (https://www.npmjs.com/signup) and logg
|
||||
<li>Run <code>git push && git push --tags</code> to push the commit that NPM creates to your git remote.</li>
|
||||
</ul>
|
||||
<p>It is probably a good idea to put into your README.md the following instructions for your users to get the tarball download link.</p>
|
||||
<div class="highlight"><pre><span></span><code>npm view <extension-name> dist.tarball
|
||||
<div class="highlight"><pre><span></span><code>npm<span class="w"> </span>view<span class="w"> </span><extension-name><span class="w"> </span>dist.tarball
|
||||
</code></pre></div>
|
||||
<p>This will output the link that they will need to give to Lens to install your extension.</p>
|
||||
<h3 id="publish-via-github-releases">Publish via GitHub Releases<a class="headerlink" href="#publish-via-github-releases" title="Permanent link">#</a></h3>
|
||||
|
||||
@ -864,35 +864,35 @@ These components can be tested by popular React testing tools like <a href="http
|
||||
Just use <code>npm start</code> or <code>yarn test</code> to run the tests.</p>
|
||||
<p>For example, I have a component <code>GlobalPageMenuIcon</code> and want to test if <code>props.navigate</code> is called when user clicks the icon.</p>
|
||||
<p>My component <code>GlobalPageMenuIcon</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="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="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">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="kd">const</span><span class="w"> </span><span class="nx">GlobalPageMenuIcon</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">({</span><span class="w"> </span><span class="nx">navigate</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">navigate</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="ow">void</span><span class="w"> </span><span class="p">})</span><span class="o">:</span><span class="w"> </span><span class="nx">JSX</span><span class="p">.</span><span class="nx">Element</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">Icon</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">material</span><span class="o">=</span><span class="s2">"trip_origin"</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="nx">navigate</span><span class="p">()}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">data</span><span class="o">-</span><span class="nx">testid</span><span class="o">=</span><span class="s2">"global-page-menu-icon"</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="o">/></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">GlobalPageMenuIcon</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">({</span><span class="w"> </span><span class="nx">navigate</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">navigate</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="ow">void</span><span class="w"> </span><span class="p">})</span><span class="o">:</span><span class="w"> </span><span class="nx">JSX</span><span class="p">.</span><span class="nx">Element</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">Icon</span>
|
||||
<span class="w"> </span><span class="nx">material</span><span class="o">=</span><span class="s2">"trip_origin"</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="nx">navigate</span><span class="p">()}</span>
|
||||
<span class="w"> </span><span class="nx">data</span><span class="o">-</span><span class="nx">testid</span><span class="o">=</span><span class="s2">"global-page-menu-icon"</span>
|
||||
<span class="w"> </span><span class="o">/></span>
|
||||
<span class="p">)</span>
|
||||
</code></pre></div>
|
||||
<p>The test</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="w"></span>
|
||||
<span class="k">import</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="nx">screen</span><span class="p">,</span><span class="w"> </span><span class="nx">fireEvent</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">"@testing-library/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="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"react"</span>
|
||||
<span class="k">import</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="nx">screen</span><span class="p">,</span><span class="w"> </span><span class="nx">fireEvent</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">"@testing-library/react"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">import</span><span class="w"> </span><span class="nx">GlobalPageMenuIcon</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"./GlobalPageMenuIcon"</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="k">import</span><span class="w"> </span><span class="nx">GlobalPageMenuIcon</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"./GlobalPageMenuIcon"</span><span class="p">;</span>
|
||||
|
||||
<span class="nx">test</span><span class="p">(</span><span class="s2">"click called navigate()"</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="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">navigate</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">jest</span><span class="p">.</span><span class="nx">fn</span><span class="p">();</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">GlobalPageMenuIcon</span><span class="w"> </span><span class="nx">navigate</span><span class="o">=</span><span class="p">{</span><span class="nx">navigate</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">fireEvent</span><span class="p">.</span><span class="nx">click</span><span class="p">(</span><span class="nx">screen</span><span class="p">.</span><span class="nx">getByTestId</span><span class="p">(</span><span class="s2">"global-page-menu-icon"</span><span class="p">));</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">expect</span><span class="p">(</span><span class="nx">navigate</span><span class="p">).</span><span class="nx">toHaveBeenCalled</span><span class="p">();</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">});</span><span class="w"></span>
|
||||
<span class="nx">test</span><span class="p">(</span><span class="s2">"click called navigate()"</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="kd">const</span><span class="w"> </span><span class="nx">navigate</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">jest</span><span class="p">.</span><span class="nx">fn</span><span class="p">();</span>
|
||||
<span class="w"> </span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">GlobalPageMenuIcon</span><span class="w"> </span><span class="nx">navigate</span><span class="o">=</span><span class="p">{</span><span class="nx">navigate</span><span class="p">}</span><span class="w"> </span><span class="o">/></span><span class="p">);</span>
|
||||
<span class="w"> </span><span class="nx">fireEvent</span><span class="p">.</span><span class="nx">click</span><span class="p">(</span><span class="nx">screen</span><span class="p">.</span><span class="nx">getByTestId</span><span class="p">(</span><span class="s2">"global-page-menu-icon"</span><span class="p">));</span>
|
||||
<span class="w"> </span><span class="nx">expect</span><span class="p">(</span><span class="nx">navigate</span><span class="p">).</span><span class="nx">toHaveBeenCalled</span><span class="p">();</span>
|
||||
<span class="w"> </span><span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>In the example we used <a href="https://github.com/testing-library/react-testing-library">React Testing Library</a> but any React testing framework can be used to test renderer process UI components.</p>
|
||||
<p>There are more example tests in the generator's <a href="https://github.com/lensapp/generator-lens-ext/tree/main/generators/app/templates/ext-ts/components">template</a>.
|
||||
@ -917,11 +917,11 @@ To use <code>console.log()</code>, note that Lens is based on Electron, and that
|
||||
<h4 id="linux">Linux<a class="headerlink" href="#linux" title="Permanent link">#</a></h4>
|
||||
<p>On Linux, you can access the Main process logs using the Lens PID.
|
||||
First get the PID:</p>
|
||||
<div class="highlight"><pre><span></span><code>ps aux <span class="p">|</span> grep Lens <span class="p">|</span> grep -v grep
|
||||
<div class="highlight"><pre><span></span><code>ps<span class="w"> </span>aux<span class="w"> </span><span class="p">|</span><span class="w"> </span>grep<span class="w"> </span>Lens<span class="w"> </span><span class="p">|</span><span class="w"> </span>grep<span class="w"> </span>-v<span class="w"> </span>grep
|
||||
</code></pre></div>
|
||||
<p>Then get the Main process logs using the PID:</p>
|
||||
<div class="highlight"><pre><span></span><code>tail -f /proc/<span class="o">[</span>pid<span class="o">]</span>/fd/1 <span class="c1"># stdout (console.log)</span>
|
||||
tail -f /proc/<span class="o">[</span>pid<span class="o">]</span>/fd/2 <span class="c1"># stdout (console.error)</span>
|
||||
<div class="highlight"><pre><span></span><code>tail<span class="w"> </span>-f<span class="w"> </span>/proc/<span class="o">[</span>pid<span class="o">]</span>/fd/1<span class="w"> </span><span class="c1"># stdout (console.log)</span>
|
||||
tail<span class="w"> </span>-f<span class="w"> </span>/proc/<span class="o">[</span>pid<span class="o">]</span>/fd/2<span class="w"> </span><span class="c1"># stdout (console.error)</span>
|
||||
</code></pre></div>
|
||||
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
Loading…
Reference in New Issue
Block a user