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

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

Browse Source 
Signed-off-by: Roman <ixrock@gmail.com>
This commit is contained in:
Roman 2020-07-14 15:55:04 +03:00
parent 79e5d6eddc
commit b8eaa657a2
3 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/renderer/components/+cluster-settings/cluster-icon.tsx
View File

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

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

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

3
src/renderer/components/tooltip/tooltip.tsx
View File

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