mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Fix extension cluster submenu re-render (#1996)
* 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:
parent
a9d2a9ea0d
commit
5ea3dd5f5b
@ -44,7 +44,7 @@ import { ClusterPageMenuRegistration, clusterPageMenuRegistry } from "../../exte
|
||||
import { TabLayoutRoute, TabLayout } from "./layout/tab-layout";
|
||||
import { StatefulSetScaleDialog } from "./+workloads-statefulsets/statefulset-scale-dialog";
|
||||
import { eventStore } from "./+events/event.store";
|
||||
import { reaction, computed } from "mobx";
|
||||
import { reaction, computed, observable } from "mobx";
|
||||
import { nodesStore } from "./+nodes/nodes.store";
|
||||
import { podsStore } from "./+workloads-pods/pods.store";
|
||||
import { sum } from "lodash";
|
||||
@ -76,6 +76,8 @@ export class App extends React.Component {
|
||||
whatInput.ask(); // Start to monitor user input device
|
||||
}
|
||||
|
||||
@observable extensionRoutes: Map<ClusterPageMenuRegistration, React.ReactNode> = new Map();
|
||||
|
||||
async componentDidMount() {
|
||||
const cluster = getHostedCluster();
|
||||
const promises: Promise<void>[] = [];
|
||||
@ -102,6 +104,12 @@ export class App extends React.Component {
|
||||
reaction(() => this.warningsCount, (count) => {
|
||||
broadcastMessage(`cluster-warning-event-count:${cluster.id}`, count);
|
||||
});
|
||||
|
||||
reaction(() => clusterPageMenuRegistry.getRootItems(), (rootItems) => {
|
||||
this.generateExtensionTabLayoutRoutes(rootItems);
|
||||
}, {
|
||||
fireImmediately: true
|
||||
});
|
||||
}
|
||||
|
||||
@computed
|
||||
@ -145,22 +153,38 @@ export class App extends React.Component {
|
||||
return routes;
|
||||
}
|
||||
|
||||
renderExtensionTabLayoutRoutes() {
|
||||
return clusterPageMenuRegistry.getRootItems().map((menu, index) => {
|
||||
generateExtensionTabLayoutRoutes(rootItems: ClusterPageMenuRegistration[]) {
|
||||
rootItems.forEach((menu, index) => {
|
||||
let route = this.extensionRoutes.get(menu);
|
||||
|
||||
if (!route) {
|
||||
const tabRoutes = this.getTabLayoutRoutes(menu);
|
||||
|
||||
if (tabRoutes.length > 0) {
|
||||
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 {
|
||||
const page = clusterPageRegistry.getByPageMenuTarget(menu.target);
|
||||
|
||||
if (page) {
|
||||
return <Route key={`extension-tab-layout-route-${index}`} path={page.routePath} exact={page.exact} component={page.components.Page}/>;
|
||||
route = <Route key={`extension-tab-layout-route-${index}`} path={page.routePath} exact={page.exact} 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() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user