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

Fix extension cluster submenu re-render (#1996) (#2027)

Browse Source 
* fix extension cluster pages re-render when they are registered as a sub-menu item

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* lint fix

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* refactor

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
This commit is contained in:
Jari Kolehmainen 2021-01-27 16:15:13 +02:00 committed by GitHub
parent 9191d6bfd9
commit 724c6c3265
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 35 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/renderer/components/app.tsx
View File

@ -42,7 +42,7 @@ import { ClusterPageMenuRegistration, clusterPageMenuRegistry } from "../../exte
import { TabLayout, TabLayoutRoute } from "./layout/tab-layout"; import { TabLayout, TabLayoutRoute } from "./layout/tab-layout";
import { StatefulSetScaleDialog } from "./+workloads-statefulsets/statefulset-scale-dialog"; import { StatefulSetScaleDialog } from "./+workloads-statefulsets/statefulset-scale-dialog";
import { eventStore } from "./+events/event.store"; import { eventStore } from "./+events/event.store";
import { computed, reaction } from "mobx"; import { reaction, computed, observable } from "mobx";
import { nodesStore } from "./+nodes/nodes.store"; import { nodesStore } from "./+nodes/nodes.store";
import { podsStore } from "./+workloads-pods/pods.store"; import { podsStore } from "./+workloads-pods/pods.store";
import { sum } from "lodash"; import { sum } from "lodash";
@ -75,6 +75,8 @@ export class App extends React.Component {
whatInput.ask(); // Start to monitor user input device whatInput.ask(); // Start to monitor user input device
} }
@observable extensionRoutes: Map<ClusterPageMenuRegistration, React.ReactNode> = new Map();
async componentDidMount() { async componentDidMount() {
const cluster = getHostedCluster(); const cluster = getHostedCluster();
const promises: Promise<void>[] = []; const promises: Promise<void>[] = [];
@ -101,6 +103,12 @@ export class App extends React.Component {
reaction(() => this.warningsCount, (count) => { reaction(() => this.warningsCount, (count) => {
broadcastMessage(`cluster-warning-event-count:${cluster.id}`, count); broadcastMessage(`cluster-warning-event-count:${cluster.id}`, count);
}); });
reaction(() => clusterPageMenuRegistry.getRootItems(), (rootItems) => {
this.generateExtensionTabLayoutRoutes(rootItems);
}, {
fireImmediately: true
});
} }
@computed @computed
@ -143,22 +151,38 @@ export class App extends React.Component {
return routes; return routes;
} }
renderExtensionTabLayoutRoutes() { generateExtensionTabLayoutRoutes(rootItems: ClusterPageMenuRegistration[]) {
return clusterPageMenuRegistry.getRootItems().map((menu, index) => { rootItems.forEach((menu, index) => {
let route = this.extensionRoutes.get(menu);
if (!route) {
const tabRoutes = this.getTabLayoutRoutes(menu); const tabRoutes = this.getTabLayoutRoutes(menu);
if (tabRoutes.length > 0) { if (tabRoutes.length > 0) {
const pageComponent = () => <TabLayout tabs={tabRoutes} />; const pageComponent = () => <TabLayout tabs={tabRoutes} />;
return <Route key={`extension-tab-layout-route-${index}`} component={pageComponent} path={tabRoutes.map((tab) => tab.routePath)}/>; route = <Route key={`extension-tab-layout-route-${index}`} component={pageComponent} path={tabRoutes.map((tab) => tab.routePath)} />;
this.extensionRoutes.set(menu, route);
} else { } else {
const page = clusterPageRegistry.getByPageTarget(menu.target); const page = clusterPageRegistry.getByPageTarget(menu.target);
if (page) { if (page) {
return <Route key={`extension-tab-layout-route-${index}`} path={page.url} component={page.components.Page}/>; route = <Route key={`extension-tab-layout-route-${index}`} path={page.url} component={page.components.Page}/>;
this.extensionRoutes.set(menu, route);
}
} }
} }
}); });
Array.from(this.extensionRoutes.keys()).forEach((menu) => {
if (!rootItems.includes(menu)) {
this.extensionRoutes.delete(menu);
}
});
}
renderExtensionTabLayoutRoutes() {
return Array.from(this.extensionRoutes.values());
} }
renderExtensionRoutes() { renderExtensionRoutes() {