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

ClusterProxySetting refactoring

Browse Source 
Signed-off-by: alexfront <alex.andreev.email@gmail.com>
This commit is contained in:
alexfront 2020-08-05 17:25:39 +03:00
parent f533331864
commit dbce47bef4
1 changed files with 28 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
src/renderer/components/+cluster-settings/components/cluster-proxy-setting.tsx
View File

@ -1,105 +1,42 @@
import React from "react";
import { Cluster } from "../../../../main/cluster";
import { Input } from "../../input";
import { Spinner } from "../../spinner";
import { clusterStore } from "../../../../common/cluster-store"
import { Icon } from "../../icon";
import { Tooltip, TooltipPosition } from "../../tooltip";
import { autobind } from "../../../utils";
import { TextInputStatus } from "./statuses"
import throttle from "lodash/throttle";
import { observable } from "mobx";
import { observer } from "mobx-react";
import { Cluster } from "../../../../main/cluster";
import { Input } from "../../input";
import { isUrl } from "../../input/input.validators";
import { SubTitle } from "../../layout/sub-title";
interface Props {
cluster: Cluster;
cluster: Cluster;
}
@observer
export class ClusterProxySetting extends React.Component<Props> {
@observable proxy = this.props.cluster.preferences.httpsProxy || "";
@observable status = TextInputStatus.CLEAN;
@observable errorText?: string;
save = throttle((value: string) => {
this.props.cluster.preferences.httpsProxy = value;
}, 500);
onChange = (value: string) => {
this.proxy = value;
this.save(value);
}
render() {
return <>
<h4>HTTPS Proxy</h4>
<p>HTTPS Proxy server. Used for communicating with Kubernetes API.</p>
<Input
theme="round-black"
className="box grow"
value={this.proxy}
onSubmit={this.updateClusterProxy}
onChange={this.changeProxyState}
iconRight={this.getIconRight()}
placeholder="https://<address>:<port>"
/>
</>;
}
@autobind()
changeProxyState(proxy: string, _e: React.ChangeEvent) {
if (this.status === TextInputStatus.UPDATING) {
console.log("prevent changing cluster proxy while updating");
return;
}
this.status = this.proxyDiffers(proxy);
this.proxy = proxy;
}
proxyDiffers(proxy: string): TextInputStatus {
const { httpsProxy = "" } = this.props.cluster.preferences;
return proxy === httpsProxy ? TextInputStatus.CLEAN : TextInputStatus.DIRTY;
}
getIconRight(): React.ReactNode {
switch (this.status) {
case TextInputStatus.CLEAN:
return null;
case TextInputStatus.DIRTY:
return <Icon size="16px" material="fiber_manual_record"/>;
case TextInputStatus.UPDATED:
return <Icon size="16px" className="updated" material="done"/>;
case TextInputStatus.UPDATING:
return <Spinner />;
case TextInputStatus.ERROR:
return <Icon id="cluster-proxy-setting-error-icon" size="16px" material="error">
<Tooltip targetId="cluster-proxy-setting-error-icon" position={TooltipPosition.TOP}>
{this.errorText}
</Tooltip>
</Icon>
}
}
@autobind()
updateClusterProxy(proxy: string) {
if (this.proxyDiffers(proxy) !== TextInputStatus.DIRTY) {
return;
}
try {
const url = new URL(proxy);
if (url.protocol !== "https") {
this.status = TextInputStatus.ERROR
this.errorText= `Proxy's protocol should be "https"`
return
}
if (url.port === "") {
this.status = TextInputStatus.ERROR
this.errorText= "Proxy should include a port"
return
}
} catch (e) {
this.status = TextInputStatus.ERROR
this.errorText= "Invalid URL"
return
}
this.status = TextInputStatus.UPDATING
this.props.cluster.preferences.httpsProxy = proxy;
this.proxy = proxy;
this.status = TextInputStatus.UPDATED
return (
<>
<SubTitle title="HTTP Proxy"/>
<p>HTTP Proxy server. Used for communicating with Kubernetes API.</p>
<Input
theme="round-black"
value={this.proxy}
onChange={this.onChange}
placeholder="http://<address>:<port>"
validators={isUrl}
/>
</>
);
}
}