hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Fine tuning

Browse Source 
Signed-off-by: Lauri Nevala <lauri.nevala@gmail.com>
This commit is contained in:
Lauri Nevala 2020-12-07 09:03:39 +02:00
parent 1a09114c71
commit ca0340c58a
1 changed files with 3 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
docs/extensions/guides/kube-object-list-layout.md
View File

@ -143,7 +143,7 @@ Now we have created mechanism to manage `Certificate` objects in Kubernetes API.
First we define `CertificatePage` class that extends `React.Component`. First we define `CertificatePage` class that extends `React.Component`.
``` ```typescript
import { Component, LensRendererExtension } from "@k8slens/extensions"; import { Component, LensRendererExtension } from "@k8slens/extensions";
import React from "react"; import React from "react";
import { certificatesStore } from "../certificate-store"; import { certificatesStore } from "../certificate-store";
@ -154,18 +154,7 @@ export class CertificatePage extends React.Component<{ extension: LensRendererEx
} }
``` ```
We want to load all `Certificate` objects from `certificateStore` when the component is mounted. We can just call `certificatesStore.loadAll()` method: Next we will implement `render` method that will display certificates in a list. To do that, we just need to add `Component.KubeObjectListLayout` component inside `Component.TabLayout` component in render method. To define which objects the list is showing, we need to pass `certificateStore` object to `Component.KubeObjectListLayout` in `store` property. `Component.KubeObjectListLayout` will fetch automacially items from the given store when component is mounted. Also, we can define needed sorting callbacks and search filters for the list:
```
export class CertificatePage extends React.Component<{ extension: LensRendererExtension }> {
async componentDidMount() {
await certificatesStore.loadAll()
}
}
```
After that, we will implement `render` method that will display certificates in a list. To do that we just need to add `Component.KubeObjectListLayout` component inside `Component.TabLayout` component in render method. To define which objects the list is showing, we need to pass `certificateStore` object to `Component.KubeObjectListLayout` in `store` property. Also, we can define needed sorting callbacks and search filters for the list:
```typescript ```typescript
enum sortBy { enum sortBy {
@ -228,7 +217,7 @@ export default class CrdSampleExtension extends LensRendererExtension {
} }
``` ```
Here we defined that `CertificateDetails` component will render the resource details. So, next we need to implement that component. Lens will inject `Certificate` object into our component so we just need to render some information out of it. We can use `Component.DrawerItem` component from Lens Extensions API to have the same look and feel as Lens is using elsewhere: Here we defined that `CertificateDetails` component will render the resource details. So, next we need to implement that component. Lens will inject `Certificate` object into our component so we just need to render some information out of it. We can use `Component.DrawerItem` component from Lens Extensions API to give the same look and feel as Lens is using elsewhere:
```typescript ```typescript
import { Component, K8sApi } from "@k8slens/extensions"; import { Component, K8sApi } from "@k8slens/extensions";