diff --git a/src/main/menu.ts b/src/main/menu.ts index f626bfb35b..f8c4b41ac0 100644 --- a/src/main/menu.ts +++ b/src/main/menu.ts @@ -1,3 +1,4 @@ +import type { ClusterId } from "../common/cluster-store"; import { app, BrowserWindow, dialog, Menu, MenuItem, MenuItemConstructorOptions, shell } from "electron" import { autorun } from "mobx"; import { WindowManager } from "./window-manager"; @@ -29,12 +30,12 @@ export function buildMenu(windowManager: WindowManager) { return menuItems; } - function navigate(url: string, toClusterView = false) { + function navigate(url: string, clusterId?: ClusterId) { logger.info(`[MENU]: navigating to ${url}`); windowManager.navigate({ channel: "menu:navigate", url: url, - clusterId: toClusterView ? windowManager.activeClusterId : null, + clusterId: clusterId, }) } @@ -100,7 +101,11 @@ export function buildMenu(windowManager: WindowManager) { { label: 'Cluster Settings', click() { - navigate(clusterSettingsURL(), true) + navigate(clusterSettingsURL({ + params: { + clusterId: windowManager.activeClusterId + } + })) } } ]), diff --git a/src/renderer/components/+cluster-settings/cluster-settings.route.ts b/src/renderer/components/+cluster-settings/cluster-settings.route.ts index 7501ba60bd..a2c7a45fd8 100644 --- a/src/renderer/components/+cluster-settings/cluster-settings.route.ts +++ b/src/renderer/components/+cluster-settings/cluster-settings.route.ts @@ -1,8 +1,12 @@ +import type { IClusterViewRouteParams } from "../cluster-manager/cluster-view.route"; import { RouteProps } from "react-router"; import { buildURL } from "../../navigation"; -export const clusterSettingsRoute: RouteProps = { - path: "/cluster-settings" +export interface IClusterSettingsRouteParams extends IClusterViewRouteParams { } -export const clusterSettingsURL = buildURL(clusterSettingsRoute.path) +export const clusterSettingsRoute: RouteProps = { + path: `/cluster/:clusterId/settings`, +} + +export const clusterSettingsURL = buildURL(clusterSettingsRoute.path) diff --git a/src/renderer/components/+cluster-settings/cluster-settings.tsx b/src/renderer/components/+cluster-settings/cluster-settings.tsx index 9070883cb3..5feeb64d69 100644 --- a/src/renderer/components/+cluster-settings/cluster-settings.tsx +++ b/src/renderer/components/+cluster-settings/cluster-settings.tsx @@ -7,15 +7,15 @@ import { Features } from "./features"; import { Removal } from "./removal"; import { Status } from "./status"; import { General } from "./general"; -import { getHostedCluster } from "../../../common/cluster-store"; import { WizardLayout } from "../layout/wizard-layout"; import { ClusterIcon } from "../cluster-icon"; import { Icon } from "../icon"; +import { getMatchedCluster } from "../cluster-manager/cluster-view.route"; @observer export class ClusterSettings extends React.Component { render() { - const cluster = getHostedCluster(); + const cluster = getMatchedCluster(); const header = ( <>

{cluster.preferences.clusterName}

- + ); diff --git a/src/renderer/components/app.tsx b/src/renderer/components/app.tsx index 259e3c8ebe..af91aa6891 100755 --- a/src/renderer/components/app.tsx +++ b/src/renderer/components/app.tsx @@ -28,7 +28,6 @@ import { DeploymentScaleDialog } from "./+workloads-deployments/deployment-scale import { CustomResources } from "./+custom-resources/custom-resources"; import { crdRoute } from "./+custom-resources"; import { isAllowedResource } from "../../common/rbac"; -import { ClusterSettings, clusterSettingsRoute } from "./+cluster-settings"; import { ErrorBoundary } from "./error-boundary"; import { Terminal } from "./dock/terminal"; import { getHostedCluster, getHostedClusterId } from "../../common/cluster-store"; @@ -56,7 +55,6 @@ export class App extends React.Component { - diff --git a/src/renderer/components/cluster-manager/cluster-manager.scss b/src/renderer/components/cluster-manager/cluster-manager.scss index 7cbc5c12dd..d0f147ad4e 100644 --- a/src/renderer/components/cluster-manager/cluster-manager.scss +++ b/src/renderer/components/cluster-manager/cluster-manager.scss @@ -6,26 +6,22 @@ height: 100%; main { + grid-area: main; position: relative; - grid-area: main; display: flex; > * { - flex: 1; - } - } + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + display: flex; + background-color: $mainBackground; - #lens-views { - grid-area: main; - display: flex; - overflow: hidden; - - &.active { - z-index: 1; - } - - > * { - flex: 1; + > * { + flex: 1; + } } } diff --git a/src/renderer/components/cluster-manager/cluster-manager.tsx b/src/renderer/components/cluster-manager/cluster-manager.tsx index 013aaf8e57..6011549e8c 100644 --- a/src/renderer/components/cluster-manager/cluster-manager.tsx +++ b/src/renderer/components/cluster-manager/cluster-manager.tsx @@ -3,7 +3,6 @@ import React from "react"; import { Redirect, Route, Switch } from "react-router"; import { reaction } from "mobx"; import { disposeOnUnmount, observer } from "mobx-react"; -import { cssNames } from "../../utils"; import { ClustersMenu } from "./clusters-menu"; import { BottomBar } from "./bottom-bar"; import { LandingPage, landingRoute, landingURL } from "../+landing-page"; @@ -11,6 +10,7 @@ import { Preferences, preferencesRoute } from "../+preferences"; import { Workspaces, workspacesRoute } from "../+workspaces"; import { AddCluster, addClusterRoute } from "../+add-cluster"; import { ClusterView } from "./cluster-view"; +import { ClusterSettings, clusterSettingsRoute } from "../+cluster-settings"; import { clusterViewRoute, clusterViewURL, getMatchedCluster, getMatchedClusterId } from "./cluster-view.route"; import { clusterStore } from "../../../common/cluster-store"; import { hasLoadedView, initView, lensViews, refreshViews } from "./lens-views"; @@ -48,18 +48,18 @@ export class ClusterManager extends React.Component { } render() { - const cluster = getMatchedCluster(); return (
-
+
+
diff --git a/src/renderer/components/cluster-manager/cluster-status.tsx b/src/renderer/components/cluster-manager/cluster-status.tsx index 4f2ae31e65..feef102968 100644 --- a/src/renderer/components/cluster-manager/cluster-status.tsx +++ b/src/renderer/components/cluster-manager/cluster-status.tsx @@ -67,7 +67,7 @@ export class ClusterStatus extends React.Component { const failureReason = cluster.failureReason; const isError = hasErrors || isDisconnected; return ( -
+
{isError && ( { /> )}

- {cluster.contextName} + {cluster.preferences.clusterName}

{!isDisconnected && (
diff --git a/src/renderer/components/cluster-manager/cluster-view.route.ts b/src/renderer/components/cluster-manager/cluster-view.route.ts
index f186ad23ce..dae8f83323 100644
--- a/src/renderer/components/cluster-manager/cluster-view.route.ts
+++ b/src/renderer/components/cluster-manager/cluster-view.route.ts
@@ -3,21 +3,26 @@ import { ipcRenderer } from "electron";
 import { matchPath, RouteProps } from "react-router";
 import { buildURL, navigation } from "../../navigation";
 import { clusterStore, getHostedClusterId } from "../../../common/cluster-store";
+import { clusterSettingsRoute } from "../+cluster-settings/cluster-settings.route";
 
 export interface IClusterViewRouteParams {
   clusterId: string;
 }
 
 export const clusterViewRoute: RouteProps = {
-  path: "/cluster/:clusterId"
+  exact: true,
+  path: "/cluster/:clusterId",
 }
 
 export const clusterViewURL = buildURL(clusterViewRoute.path)
 
 export function getMatchedClusterId(): string {
   const matched = matchPath(navigation.location.pathname, {
-    ...clusterViewRoute,
     exact: true,
+    path: [
+      clusterViewRoute.path,
+      clusterSettingsRoute.path,
+    ].flat(),
   })
   if (matched) {
     return matched.params.clusterId;
diff --git a/src/renderer/components/cluster-manager/cluster-view.scss b/src/renderer/components/cluster-manager/cluster-view.scss
index a51edcecf3..eb971eaa19 100644
--- a/src/renderer/components/cluster-manager/cluster-view.scss
+++ b/src/renderer/components/cluster-manager/cluster-view.scss
@@ -1,7 +1,5 @@
 .ClusterView {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex: 1;
+  &:empty {
+    display: none;
+  }
 }
diff --git a/src/renderer/components/cluster-manager/cluster-view.tsx b/src/renderer/components/cluster-manager/cluster-view.tsx
index f3ebbeafca..f537352c22 100644
--- a/src/renderer/components/cluster-manager/cluster-view.tsx
+++ b/src/renderer/components/cluster-manager/cluster-view.tsx
@@ -11,7 +11,7 @@ export class ClusterView extends React.Component {
     const cluster = getMatchedCluster();
     const showStatus = cluster && (!cluster.available || !hasLoadedView(cluster.id))
     return (
-      
+
{showStatus && ( )} diff --git a/src/renderer/components/cluster-manager/clusters-menu.tsx b/src/renderer/components/cluster-manager/clusters-menu.tsx index a356fc1fe7..f5bba3ae41 100644 --- a/src/renderer/components/cluster-manager/clusters-menu.tsx +++ b/src/renderer/components/cluster-manager/clusters-menu.tsx @@ -21,7 +21,6 @@ import { Tooltip } from "../tooltip"; import { ConfirmDialog } from "../confirm-dialog"; import { clusterIpc } from "../../../common/cluster-ipc"; import { clusterViewURL, getMatchedClusterId } from "./cluster-view.route"; -import { navigateInClusterView } from "./lens-views"; // fixme: allow to rearrange clusters with drag&drop @@ -49,7 +48,11 @@ export class ClustersMenu extends React.Component { menu.append(new MenuItem({ label: _i18n._(t`Settings`), click: () => { - navigateInClusterView(clusterSettingsURL(), cluster.id) + navigate(clusterSettingsURL({ + params: { + clusterId: cluster.id + } + })) } })); if (cluster.online) { diff --git a/src/renderer/components/layout/main-layout.tsx b/src/renderer/components/layout/main-layout.tsx index dcfa3f5efa..678f4d8876 100755 --- a/src/renderer/components/layout/main-layout.tsx +++ b/src/renderer/components/layout/main-layout.tsx @@ -48,11 +48,12 @@ export class MainLayout extends React.Component { render() { const { className, contentClass, headerClass, tabs, footer, footerClass, children } = this.props; const routePath = navigation.location.pathname; + const cluster = getHostedCluster(); return (
- {getHostedCluster().contextName} + {cluster.preferences?.clusterName || cluster.contextName}
diff --git a/src/renderer/navigation.ts b/src/renderer/navigation.ts index e44cf25136..df738b1ef4 100644 --- a/src/renderer/navigation.ts +++ b/src/renderer/navigation.ts @@ -12,7 +12,7 @@ export const navigation = createObservableHistory(history); // handle navigation from other process (e.g. system menus in main, common->cluster view interactions) if (ipcRenderer) { ipcRenderer.on("menu:navigate", (event, location: LocationDescriptor) => { - logger.info(`Navigation via IPC to location: ${JSON.stringify(location)}`, event); + logger.info(`[IPC]: ${event.type} ${JSON.stringify(location)}`, event); navigate(location); }) } @@ -26,6 +26,8 @@ export interface IURLParams

{ query?: IQueryParams & Q; } +// todo: extract building urls to commons (also used in menu.ts) +// fixme: missing types validation for params & query export function buildURL

(path: string | string[]) { const pathBuilder = compile(path.toString()); return function ({ params, query }: IURLParams = {}) {