added tooltip to cluster-icon.tsx, continue debugging windows-manager...

Signed-off-by: Roman <ixrock@gmail.com>

src/renderer/components/+cluster-settings/cluster-icon.tsx

@@ -7,6 +7,7 @@ import { Hashicon } from "@emeraldpay/hashicon-react";
 import { Cluster } from "../../../main/cluster";
 import { cssNames, IClassName } from "../../utils";
 import { Badge } from "../badge";
+import { Tooltip, TooltipContent } from "../tooltip";
 
 interface Props extends DOMAttributes<HTMLElement> {
   cluster: Cluster;
@@ -28,14 +29,18 @@ export class ClusterIcon extends React.Component<Props> {
 
   render() {
     const { className: cName, cluster, showErrors, errorClass, options, interactive, isActive, children, ...elemProps } = this.props;
-    const { isAdmin, eventCount, preferences } = cluster;
+    const { isAdmin, eventCount, preferences, id: clusterId } = cluster;
     const { clusterName, icon } = preferences;
+    const clusterIconId = `cluster-icon-${clusterId}`;
     const className = cssNames("ClusterIcon flex inline", cName, {
       interactive: interactive || !!this.props.onClick,
       active: isActive,
     });
     return (
-      <div {...elemProps} className={className}>
+      <div {...elemProps} className={className} id={clusterIconId}>
+        <Tooltip htmlFor={clusterIconId} following>
+          <TooltipContent nowrap>{clusterName}</TooltipContent>
+        </Tooltip>
         {icon && <img src={icon} alt={clusterName}/>}
         {!icon && <Hashicon value={clusterName} options={options}/>}
         {showErrors && isAdmin && eventCount > 0 && (

src/renderer/components/app.tsx

@@ -30,6 +30,7 @@ import { DeploymentScaleDialog } from "./+workloads-deployments/deployment-scale
 import { CustomResources } from "./+custom-resources/custom-resources";
 import { crdRoute } from "./+custom-resources";
 import { isAllowedResource } from "../api/rbac";
+import { clusterStore } from "../../common/cluster-store";
 
 @observer
 export class App extends React.Component {
@@ -47,9 +48,13 @@ export class App extends React.Component {
       <Fragment>
         <Switch>
           <Switch>
-            {/* todo: remove */}
-            <Route children={() => <p className="info">App is running!</p>}/>
-
+            <Route children={() => (
+              <div>
+                <p className="info">App is running!</p>
+                <p>Current cluster:</p>
+                <pre>{JSON.stringify(clusterStore.activeCluster.toJSON(), null, 2)}</pre>
+              </div>
+            )}/>
             <Route component={Cluster} {...clusterRoute}/>
             <Route component={Nodes} {...nodesRoute}/>
             <Route component={Workloads} {...workloadsRoute}/>

src/renderer/components/tooltip/tooltip.tsx

@@ -7,8 +7,9 @@ import { createPortal } from "react-dom"
 import { autobind, cssNames } from "../../utils";
 import { Animate } from "../animate";
 
-// fixme: better positioning + remove "flying effect"
+// todo: refactoring
 // todo: add flag to show visible tooltip by default (until mouse-over the target)
+// fixme: better positioning + remove "flying effect"
 
 export interface TooltipProps {
   htmlFor: string;