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

Add draft how to render a react component in contract of injection token

Browse Source 
Signed-off-by: Iku-turso <mikko.aspiala@gmail.com>
This commit is contained in:
Iku-turso 2023-03-16 14:47:47 +02:00
parent c025b1a7c2
commit aab72a9bf8
3 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/core/src/renderer/components/+cluster/cluster-overview.tsx
View File

@ -81,7 +81,7 @@ class NonInjectedClusterOverview extends React.Component<Dependencies> {
<> <>
<ClusterMetrics/> <ClusterMetrics/>
{this.props.uiBlocks.map((block) => ( {this.props.uiBlocks.map((block) => (
<div key={block.id}>{block.text}</div> <div key={block.id}>{<block.Component />}</div>
))} ))}
lol lol
<ClusterPieCharts/> <ClusterPieCharts/>

14
packages/core/src/renderer/components/+cluster/ui-block.injectable.tsx
View File

@ -2,17 +2,19 @@
* Copyright (c) OpenLens Authors. All rights reserved. * Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information. * Licensed under MIT License. See LICENSE in root directory for more information.
*/ */
import React from 'react';
import { getInjectable } from "@ogre-tools/injectable"; import { getInjectable } from "@ogre-tools/injectable";
import { clusterOverviewUIBlockInjectionToken } from "@k8slens/metrics"; import { clusterOverviewUIBlockInjectionToken } from "@k8slens/metrics";
const uiBlock = getInjectable({ const uiBlock = getInjectable({
id: "lol", id: "lol",
instantiate: () => {
return { instantiate: () => ({
id: "lol-id", id: "lol-id",
text: "lol", text: "lol-1",
}; Component: () => <div>Trollollol</div>,
}, }),
injectionToken: clusterOverviewUIBlockInjectionToken, injectionToken: clusterOverviewUIBlockInjectionToken,
}); });

1
packages/technical-features/metrics/src/cluster-overview/cluster-overview-ui-block.ts
View File

@ -7,6 +7,7 @@ import { getInjectionToken } from "@ogre-tools/injectable";
export type ClusterOverviewUIBlock = { export type ClusterOverviewUIBlock = {
id: string; id: string;
text: string; text: string;
Component: React.ElementType
}; };
export const clusterOverviewUIBlockInjectionToken = getInjectionToken<ClusterOverviewUIBlock>({ export const clusterOverviewUIBlockInjectionToken = getInjectionToken<ClusterOverviewUIBlock>({