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

Glued InstallMetrics & InstallUserMode into 1 component

Browse Source 
Signed-off-by: alexfront <alex.andreev.email@gmail.com>
This commit is contained in:
alexfront 2020-08-05 17:29:57 +03:00
parent b6db412275
commit 25633290db
3 changed files with 46 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/renderer/components/+cluster-settings/components/install-metrics.tsx → src/renderer/components/+cluster-settings/components/install-feature.tsx
View File

@ -1,29 +1,26 @@
import React from "react";
import { observable } from "mobx";
import { observer } from "mobx-react";
import { clusterIpc } from "../../../../common/cluster-ipc";
import { Cluster } from "../../../../main/cluster";
import { Button } from "../../button";
import { MetricsFeature } from "../../../../features/metrics";
import { Spinner } from "../../spinner";
import { clusterIpc } from "../../../../common/cluster-ipc";
import { observable } from "mobx";
import { ActionStatus } from "./statuses"
import { observer } from "mobx-react";
import { SubTitle } from "../../layout/sub-title";
import { Notifications } from "../../notifications";
import { Spinner } from "../../spinner";
interface Props {
cluster: Cluster;
cluster: Cluster
feature: string
}
@observer
export class InstallMetrics extends React.Component<Props> {
@observable status = ActionStatus.IDLE;
@observable errorText?: string;
export class InstallFeature extends React.Component<Props> {
@observable loading = false;
getActionButtons() {
const { cluster } = this.props;
const features = cluster.features[MetricsFeature.id];
const disabled = !cluster.isAdmin || this.status === ActionStatus.PROCESSING;
const loadingIcon = this.status === ActionStatus.PROCESSING ? <Spinner/> : null;
const { cluster, feature } = this.props;
const features = cluster.features[feature];
const disabled = !cluster.isAdmin || this.loading;
const loadingIcon = this.loading ? <Spinner/> : null;
if (!features) return null;
return (
<div className="flex gaps align-center">
@ -62,27 +59,21 @@ export class InstallMetrics extends React.Component<Props> {
runAction(action: keyof typeof clusterIpc): () => Promise<void> {
return async () => {
const { cluster } = this.props;
const { cluster, feature } = this.props;
try {
this.status = ActionStatus.PROCESSING
await clusterIpc[action].invokeFromRenderer(cluster.id, MetricsFeature.id);
this.loading = true;
await clusterIpc[action].invokeFromRenderer(cluster.id, feature);
} catch (err) {
Notifications.error(err.toString());
}
this.status = ActionStatus.IDLE;
this.loading = false;
};
}
render() {
return (
<>
<SubTitle title="Metrics"/>
<p>
Enable timeseries data visualization (Prometheus stack) for your cluster.
Install this only if you don't have existing Prometheus stack installed.
You can see preview of manifests{" "}
<a href="https://github.com/lensapp/lens/tree/master/src/features/metrics" target="_blank">here</a>.
</p>
{this.props.children}
{this.getActionButtons()}
</>
);

108
src/renderer/components/+cluster-settings/components/install-user-mode.tsx
View File

@ -1,108 +0,0 @@
import React from "react";
import { Cluster } from "../../../../main/cluster";
import { Button } from "../../button";
import { autobind } from "../../../utils";
import { Tooltip, TooltipPosition } from "../../tooltip";
import { Spinner } from "../../spinner";
import { Icon } from "../../icon";
import { UserModeFeature } from "../../../../features/user-mode";
import { clusterIpc } from "../../../../common/cluster-ipc";
import { observable } from "mobx";
import { ActionStatus } from "./statuses"
import { observer } from "mobx-react";
interface Props {
cluster: Cluster;
}
@observer
export class InstallUserMode extends React.Component<Props> {
@observable status = ActionStatus.IDLE;
@observable errorText?: string;
render() {
return <>
<h4>User Mode</h4>
<p>
User Mode feature enables non-admin users to see namespaces they have access to.
This is achieved by configuring RBAC rules so that every authenticated user is granted to list namespaces.
</p>
<div className="center">
{this.getActionButtons()}
</div>
</>;
}
getStatusIcon(): React.ReactNode {
switch (this.status) {
case ActionStatus.IDLE:
return null;
case ActionStatus.PROCESSING:
return <Spinner key="spinner" />;
case ActionStatus.ERROR:
return <Icon key="error" size="16px" material="error" title={this.errorText}></Icon>
}
}
getDisabledToolTip(id: string, action: string): React.ReactNode {
const { cluster } = this.props;
if (cluster.isAdmin) {
return null;
}
return <Tooltip targetId={id} position={TooltipPosition.TOP}>
{action} only allowed by admins
</Tooltip>;
}
getActionButtons(): React.ReactNode[] {
const { cluster } = this.props
const buttons = [];
if (cluster.features[UserModeFeature.id]?.canUpgrade) {
buttons.push(
<Button key="upgrade" id="cluster-feature-user-mode-upgrade" disabled={!cluster.isAdmin} primary onClick={this.runAction("upgradeFeature")}>
Upgrade {this.getStatusIcon()} {this.getDisabledToolTip("cluster-feature-user-mode-upgrade", "Upgrading")}
</Button>
);
}
if (cluster.features[UserModeFeature.id]?.installed) {
buttons.push(
<Button key="uninstall" id="cluster-feature-user-mode-uninstall" disabled={!cluster.isAdmin} primary onClick={this.runAction("uninstallFeature")}>
Uninstall {this.getStatusIcon()} {this.getDisabledToolTip("cluster-feature-user-mode-uninstall", "Uninstalling")}
</Button>
);
} else {
buttons.push(
<Button key="install" id="cluster-feature-user-mode-install" disabled={!cluster.isAdmin} primary onClick={this.runAction("installFeature")}>
Install {this.getStatusIcon()} {this.getDisabledToolTip("cluster-feature-user-mode-install", "Installing")}
</Button>
);
}
return buttons;
}
runAction(action: keyof typeof clusterIpc): () => Promise<void> {
return async () => {
const { cluster } = this.props;
console.log(`running ${action} ${UserModeFeature.id} onto ${cluster.preferences.clusterName}`);
try {
this.status = ActionStatus.PROCESSING
await clusterIpc[action].invokeFromRenderer(cluster.id, UserModeFeature.id);
try {
await cluster.refresh();
} catch (err) {
console.error(err);
}
this.status = ActionStatus.IDLE
} catch (err) {
this.status = ActionStatus.ERROR
this.errorText = err.toString()
}
};
}
}

36
src/renderer/components/+cluster-settings/features.tsx
View File

@ -1,7 +1,9 @@
import React from "react";
import { Cluster } from "../../../main/cluster";
import { InstallMetrics } from "./components/install-metrics";
import { InstallUserMode } from "./components/install-user-mode";
import { InstallFeature } from "./components/install-feature";
import { SubTitle } from "../layout/sub-title";
import { MetricsFeature } from "../../../features/metrics";
import { UserModeFeature } from "../../../features/user-mode";
interface Props {
cluster: Cluster;
@ -11,10 +13,30 @@ export class Features extends React.Component<Props> {
render() {
const { cluster } = this.props;
return <div>
<h2>Features</h2>
<InstallMetrics cluster={cluster}/>
<InstallUserMode cluster={cluster}/>
</div>;
return (
<div>
<h2>Features</h2>
<InstallFeature cluster={cluster} feature={MetricsFeature.id}>
<>
<SubTitle title="Metrics"/>
<p>
Enable timeseries data visualization (Prometheus stack) for your cluster.
Install this only if you don't have existing Prometheus stack installed.
You can see preview of manifests{" "}
<a href="https://github.com/lensapp/lens/tree/master/src/features/metrics" target="_blank">here</a>.
</p>
</>
</InstallFeature>
<InstallFeature cluster={cluster} feature={UserModeFeature.id}>
<>
<SubTitle title="User Mode"/>
<p>
User Mode feature enables non-admin users to see namespaces they have access to.{" "}
This is achieved by configuring RBAC rules so that every authenticated user is granted to list namespaces.
</p>
</>
</InstallFeature>
</div>
);
}
}