diff --git a/extensions/example-extension/page.tsx b/extensions/example-extension/page.tsx index 3887457f50..7cf93b4cec 100644 --- a/extensions/example-extension/page.tsx +++ b/extensions/example-extension/page.tsx @@ -63,3 +63,77 @@ export class ExamplePage extends React.Component { ); } } + +@observer +export class SimplePage extends React.Component<{ extension: LensRendererExtension }> { + render() { + + return ( +
+
+ +
+ +
Hello from Example extension!
+
Location: {location.href}
+
+ ); + } +} + +export interface SimpleParamsPageProps extends Interface.PageComponentProps { + extension: LensRendererExtension; // provided in "./renderer.tsx" +} + +export interface SimpleParamsPageParams { + exampleId: string; + namespace: string; +} + +@observer +export class SimpleParamsPage extends React.Component { + async componentDidMount() { + await namespaceStore.loadAll(); + } + + deactivate = () => { + const { extension } = this.props; + + extension.disable(); + }; + + renderNamespace() { + const { namespace } = this.props.params; + const name = namespace.get(); + + return ( +
+ ; +
+ ); + } + + render() { + const { exampleId } = this.props.params; + + return ( +
+
+ +
+ +
Hello from Example extension!
+
Location: {location.href}
+
Namespaces: {this.renderNamespace()}
+ +

+ exampleId.set("secret")}>Show secret button + {exampleId.get() === "secret" && ( + + )} +

+
+ ); + } +} + diff --git a/extensions/example-extension/renderer.tsx b/extensions/example-extension/renderer.tsx index 76a00c3bf6..bad8dc4844 100644 --- a/extensions/example-extension/renderer.tsx +++ b/extensions/example-extension/renderer.tsx @@ -1,11 +1,36 @@ import { Component, Interface, K8sApi, LensRendererExtension } from "@k8slens/extensions"; -import { ExamplePage, ExamplePageParams, namespaceStore } from "./page"; +import { + ExamplePage, ExamplePageParams, namespaceStore, + SimplePage, SimpleParamsPage, SimpleParamsPageParams +} from "./page"; import React from "react"; import path from "path"; export default class ExampleExtension extends LensRendererExtension { clusterPages: Interface.PageRegistration[] = [ { + id: "simple-page", + components: { + Page: () => { + return ; + }, + }, + }, + { + id: "page-with-simple-params", + components: { + Page: (props: Interface.PageComponentProps) => { + return ; + }, + }, + params: { + // setup basic param "exampleId" with default value "demo" + exampleId: "demo", + namespace: "default" + } + }, + { + id: "page-with-complicated-params", components: { Page: (props: Interface.PageComponentProps) => { return ; @@ -32,11 +57,46 @@ export default class ExampleExtension extends LensRendererExtension { clusterPageMenus: Interface.ClusterPageMenuRegistration[] = [ { + id: "top-example-menu", title: "Example extension", components: { Icon: ExampleIcon, }, }, + { + parentId: "top-example-menu", + title: "Simple Page", + target: { + pageId: "simple-page" + }, + components: { + Icon: ExampleIcon, + }, + }, + { + parentId: "top-example-menu", + title: "Simple Params", + target: { + pageId: "page-with-simple-parms", + params: { + exampleId: "no-secret", + namespace: "test" + } + }, + components: { + Icon: ExampleIcon, + }, + }, + { + parentId: "top-example-menu", + title: "Complicated Params", + target: { + pageId: "page-with-complicated-params" + }, + components: { + Icon: ExampleIcon, + }, + }, ]; } diff --git a/package.json b/package.json index 3e5aca0c42..e2bf3f2c91 100644 --- a/package.json +++ b/package.json @@ -191,7 +191,8 @@ "node-menu", "metrics-cluster-feature", "license-menu-item", - "kube-object-event-status" + "kube-object-event-status", + "example-extension" ] }, "dependencies": {