mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Allow user to select Kubeconfig from filesystem (#740)
* Allow user to select Kubeconfig from filesystem, fix #738 Signed-off-by: Roman <ixrock@gmail.com> Co-authored-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> Co-authored-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
24 files changed
+1113
-263
No files matched your search
@@ -1,5 +1,39 @@
|
||||
.AddCluster {
|
||||
.droppable {
|
||||
box-shadow: 0 0 0 5px inset $primary;
|
||||
|
||||
> * {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.hint {
|
||||
margin-top: -$padding;
|
||||
color: $textColorSecondary;
|
||||
|
||||
> * {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.AceEditor {
|
||||
min-height: 200px;
|
||||
max-height: 400px;
|
||||
}
|
||||
|
||||
.Select {
|
||||
.kube-context {
|
||||
--flex-gap: #{$padding};
|
||||
}
|
||||
|
||||
// todo: extract to component, merge with namespace-select.scss
|
||||
&__placeholder {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__control {
|
||||
box-shadow: 0 0 0 1px $borderFaintColor;
|
||||
}
|
||||
@@ -8,4 +42,4 @@
|
||||
code {
|
||||
color: $pink-400;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,112 +1,163 @@
|
||||
import "./add-cluster.scss"
|
||||
import os from "os";
|
||||
import React, { Fragment } from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import { computed, observable } from "mobx";
|
||||
import { action, observable, runInAction } from "mobx";
|
||||
import { remote } from "electron";
|
||||
import { KubeConfig } from "@kubernetes/client-node";
|
||||
import { t, Trans } from "@lingui/macro";
|
||||
import { _i18n } from "../../i18n";
|
||||
import { t, Trans } from "@lingui/macro";
|
||||
import { Select, SelectOption } from "../select";
|
||||
import { Input } from "../input";
|
||||
import { AceEditor } from "../ace-editor";
|
||||
import { Button } from "../button";
|
||||
import { Icon } from "../icon";
|
||||
import { WizardLayout } from "../layout/wizard-layout";
|
||||
import { getKubeConfigLocal, loadConfig, saveConfigToAppFiles, splitConfig, validateConfig } from "../../../common/kube-helpers";
|
||||
import { clusterStore } from "../../../common/cluster-store";
|
||||
import { kubeConfigDefaultPath, loadConfig, splitConfig, validateConfig } from "../../../common/kube-helpers";
|
||||
import { ClusterModel, ClusterStore, clusterStore } from "../../../common/cluster-store";
|
||||
import { workspaceStore } from "../../../common/workspace-store";
|
||||
import { v4 as uuid } from "uuid"
|
||||
import { navigate } from "../../navigation";
|
||||
import { userStore } from "../../../common/user-store";
|
||||
import { clusterViewURL } from "../cluster-manager/cluster-view.route";
|
||||
import { cssNames } from "../../utils";
|
||||
import { Notifications } from "../notifications";
|
||||
import { Tab, Tabs } from "../tabs";
|
||||
|
||||
enum KubeConfigSourceTab {
|
||||
FILE = "file",
|
||||
TEXT = "text"
|
||||
}
|
||||
|
||||
@observer
|
||||
export class AddCluster extends React.Component {
|
||||
readonly custom: any = "custom"
|
||||
@observable.ref clusterConfig: KubeConfig;
|
||||
@observable.ref kubeConfig: KubeConfig; // local ~/.kube/config (if available)
|
||||
@observable.ref kubeConfigLocal: KubeConfig;
|
||||
@observable.ref error: React.ReactNode;
|
||||
|
||||
@observable kubeContexts = observable.map<string, KubeConfig>(); // available contexts from kubeconfig-file or user-input
|
||||
@observable selectedContexts = observable.array<string>();
|
||||
@observable sourceTab = KubeConfigSourceTab.FILE;
|
||||
@observable kubeConfigPath = "";
|
||||
@observable customConfig = ""
|
||||
@observable proxyServer = ""
|
||||
@observable isWaiting = false
|
||||
@observable showSettings = false
|
||||
@observable proxyServer = ""
|
||||
@observable customConfig = ""
|
||||
@observable dropAreaActive = false;
|
||||
|
||||
async componentDidMount() {
|
||||
const kubeConfig: string = await getKubeConfigLocal()
|
||||
if (kubeConfig) {
|
||||
this.kubeConfig = loadConfig(kubeConfig)
|
||||
}
|
||||
componentDidMount() {
|
||||
this.setKubeConfig(userStore.kubeConfigPath);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
userStore.markNewContextsAsSeen();
|
||||
}
|
||||
|
||||
@computed get isCustom() {
|
||||
return this.clusterConfig === this.custom;
|
||||
}
|
||||
|
||||
@computed get clusterOptions() {
|
||||
const options: SelectOption<KubeConfig>[] = [];
|
||||
if (this.kubeConfig) {
|
||||
splitConfig(this.kubeConfig).forEach(kubeConfig => {
|
||||
const context = kubeConfig.currentContext;
|
||||
const hasContext = clusterStore.hasContext(context);
|
||||
if (!hasContext) {
|
||||
options.push({
|
||||
value: kubeConfig,
|
||||
label: context,
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
options.push({
|
||||
label: <Trans>Custom..</Trans>,
|
||||
value: this.custom,
|
||||
});
|
||||
return options;
|
||||
}
|
||||
|
||||
protected formatClusterContextLabel = ({ value, label }: SelectOption<KubeConfig>) => {
|
||||
if (value instanceof KubeConfig) {
|
||||
const context = value.currentContext;
|
||||
const isNew = userStore.newContexts.has(context);
|
||||
const className = `${context} kube-context flex gaps align-center`
|
||||
return (
|
||||
<div className={className}>
|
||||
<span>{context}</span>
|
||||
{isNew && <Icon material="fiber_new"/>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return label;
|
||||
};
|
||||
|
||||
addCluster = async () => {
|
||||
const { clusterConfig, customConfig, proxyServer } = this;
|
||||
const clusterId = uuid();
|
||||
this.isWaiting = true
|
||||
this.error = ""
|
||||
@action
|
||||
setKubeConfig(filePath: string, { throwError = false } = {}) {
|
||||
try {
|
||||
const config = this.isCustom ? loadConfig(customConfig) : clusterConfig;
|
||||
if (!config) {
|
||||
this.error = <Trans>Please select kubeconfig</Trans>
|
||||
this.kubeConfigLocal = loadConfig(filePath);
|
||||
validateConfig(this.kubeConfigLocal);
|
||||
this.refreshContexts();
|
||||
this.kubeConfigPath = filePath;
|
||||
userStore.kubeConfigPath = filePath; // save to store
|
||||
} catch (err) {
|
||||
Notifications.error(
|
||||
<div>Can't setup <code>{filePath}</code> as kubeconfig: {String(err)}</div>
|
||||
);
|
||||
if (throwError) {
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@action
|
||||
refreshContexts() {
|
||||
this.selectedContexts.clear();
|
||||
this.kubeContexts.clear();
|
||||
|
||||
switch (this.sourceTab) {
|
||||
case KubeConfigSourceTab.FILE:
|
||||
const contexts = this.getContexts(this.kubeConfigLocal);
|
||||
this.kubeContexts.replace(contexts);
|
||||
break;
|
||||
|
||||
case KubeConfigSourceTab.TEXT:
|
||||
try {
|
||||
this.error = ""
|
||||
const contexts = this.getContexts(loadConfig(this.customConfig || "{}"));
|
||||
this.kubeContexts.replace(contexts);
|
||||
} catch (err) {
|
||||
this.error = String(err);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
getContexts(config: KubeConfig): Map<string, KubeConfig> {
|
||||
const contexts = new Map();
|
||||
splitConfig(config).forEach(config => {
|
||||
const isExists = clusterStore.hasContext(config.currentContext);
|
||||
if (!isExists) {
|
||||
contexts.set(config.currentContext, config);
|
||||
}
|
||||
})
|
||||
return contexts
|
||||
}
|
||||
|
||||
selectKubeConfigDialog = async () => {
|
||||
const { dialog, BrowserWindow } = remote;
|
||||
const { canceled, filePaths } = await dialog.showOpenDialog(BrowserWindow.getFocusedWindow(), {
|
||||
defaultPath: this.kubeConfigPath,
|
||||
properties: ["openFile", "showHiddenFiles"],
|
||||
message: _i18n._(t`Select custom kubeconfig file`),
|
||||
buttonLabel: _i18n._(t`Use configuration`),
|
||||
});
|
||||
if (!canceled && filePaths.length) {
|
||||
this.setKubeConfig(filePaths[0]);
|
||||
}
|
||||
}
|
||||
|
||||
addClusters = () => {
|
||||
try {
|
||||
if (!this.selectedContexts.length) {
|
||||
this.error = <Trans>Please select at least one cluster context</Trans>
|
||||
return;
|
||||
}
|
||||
validateConfig(config);
|
||||
await clusterStore.addCluster({
|
||||
id: clusterId,
|
||||
kubeConfigPath: saveConfigToAppFiles(clusterId, config),
|
||||
workspace: workspaceStore.currentWorkspaceId,
|
||||
contextName: config.currentContext,
|
||||
preferences: {
|
||||
clusterName: config.currentContext,
|
||||
httpsProxy: proxyServer || undefined,
|
||||
},
|
||||
this.error = ""
|
||||
this.isWaiting = true
|
||||
const newClusters: ClusterModel[] = this.selectedContexts.map(context => {
|
||||
const clusterId = uuid();
|
||||
const kubeConfig = this.kubeContexts.get(context);
|
||||
const kubeConfigPath = this.sourceTab === KubeConfigSourceTab.FILE
|
||||
? this.kubeConfigPath // save link to original kubeconfig in file-system
|
||||
: ClusterStore.embedCustomKubeConfig(clusterId, kubeConfig); // save in app-files folder
|
||||
return {
|
||||
id: clusterId,
|
||||
kubeConfigPath: kubeConfigPath,
|
||||
workspace: workspaceStore.currentWorkspaceId,
|
||||
contextName: kubeConfig.currentContext,
|
||||
preferences: {
|
||||
clusterName: kubeConfig.currentContext,
|
||||
httpsProxy: this.proxyServer || undefined,
|
||||
},
|
||||
}
|
||||
});
|
||||
navigate(clusterViewURL({ params: { clusterId } }))
|
||||
runInAction(() => {
|
||||
clusterStore.addCluster(...newClusters);
|
||||
if (newClusters.length === 1) {
|
||||
const clusterId = newClusters[0].id;
|
||||
clusterStore.setActive(clusterId);
|
||||
navigate(clusterViewURL({ params: { clusterId } }));
|
||||
} else {
|
||||
Notifications.ok(
|
||||
<Trans>Successfully imported <b>{newClusters.length}</b> cluster(s)</Trans>
|
||||
);
|
||||
}
|
||||
})
|
||||
this.refreshContexts();
|
||||
} catch (err) {
|
||||
this.error = String(err);
|
||||
Notifications.error(<Trans>Error while adding cluster(s): {this.error}</Trans>);
|
||||
} finally {
|
||||
this.isWaiting = false;
|
||||
}
|
||||
@@ -163,19 +214,156 @@ export class AddCluster extends React.Component {
|
||||
)
|
||||
}
|
||||
|
||||
renderKubeConfigSource() {
|
||||
return (
|
||||
<>
|
||||
<Tabs withBorder onChange={this.onKubeConfigTabChange}>
|
||||
<Tab
|
||||
value={KubeConfigSourceTab.FILE}
|
||||
label={<Trans>Select kubeconfig file</Trans>}
|
||||
active={this.sourceTab == KubeConfigSourceTab.FILE}/>
|
||||
<Tab
|
||||
value={KubeConfigSourceTab.TEXT}
|
||||
label={<Trans>Paste as text</Trans>}
|
||||
active={this.sourceTab == KubeConfigSourceTab.TEXT}
|
||||
/>
|
||||
</Tabs>
|
||||
{this.sourceTab === KubeConfigSourceTab.FILE && (
|
||||
<>
|
||||
<div className="kube-config-select flex gaps align-center">
|
||||
<Input
|
||||
theme="round-black"
|
||||
className="kube-config-path box grow"
|
||||
value={this.kubeConfigPath}
|
||||
onChange={v => this.kubeConfigPath = v}
|
||||
onBlur={this.onKubeConfigInputBlur}
|
||||
/>
|
||||
{this.kubeConfigPath !== kubeConfigDefaultPath && (
|
||||
<Icon
|
||||
material="settings_backup_restore"
|
||||
onClick={() => this.setKubeConfig(kubeConfigDefaultPath)}
|
||||
tooltip={<Trans>Reset</Trans>}
|
||||
/>
|
||||
)}
|
||||
<Icon
|
||||
material="folder"
|
||||
onClick={this.selectKubeConfigDialog}
|
||||
tooltip={<Trans>Browse</Trans>}
|
||||
/>
|
||||
</div>
|
||||
<small className="hint">
|
||||
<Trans>Pro-Tip: you can also drag-n-drop kubeconfig file to this area</Trans>
|
||||
</small>
|
||||
</>
|
||||
)}
|
||||
{this.sourceTab === KubeConfigSourceTab.TEXT && (
|
||||
<>
|
||||
<AceEditor
|
||||
autoFocus
|
||||
showGutter={false}
|
||||
mode="yaml"
|
||||
value={this.customConfig}
|
||||
onChange={value => {
|
||||
this.customConfig = value;
|
||||
this.refreshContexts();
|
||||
}}
|
||||
/>
|
||||
<small className="hint">
|
||||
<Trans>Pro-Tip: paste kubeconfig to get available contexts</Trans>
|
||||
</small>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
renderContextSelector() {
|
||||
const allContexts = Array.from(this.kubeContexts.keys());
|
||||
const placeholder = this.selectedContexts.length > 0
|
||||
? <Trans>Selected contexts: <b>{this.selectedContexts.length}</b></Trans>
|
||||
: <Trans>Select contexts</Trans>;
|
||||
return (
|
||||
<>
|
||||
<Select
|
||||
id="kubecontext-select" // todo: provide better mapping for integration tests (e.g. data-test-id="..")
|
||||
placeholder={placeholder}
|
||||
controlShouldRenderValue={false}
|
||||
closeMenuOnSelect={false}
|
||||
isOptionSelected={() => false}
|
||||
options={allContexts}
|
||||
formatOptionLabel={this.formatContextLabel}
|
||||
noOptionsMessage={() => _i18n._(t`No contexts available or they have been added already`)}
|
||||
onChange={({ value: ctx }: SelectOption<string>) => {
|
||||
if (this.selectedContexts.includes(ctx)) {
|
||||
this.selectedContexts.remove(ctx)
|
||||
} else {
|
||||
this.selectedContexts.push(ctx);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{this.selectedContexts.length > 0 && (
|
||||
<small className="hint">
|
||||
<span>Applying contexts:</span>{" "}
|
||||
<code>{this.selectedContexts.join(", ")}</code>
|
||||
</small>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
onKubeConfigInputBlur = (evt: React.FocusEvent<HTMLInputElement>) => {
|
||||
const isChanged = this.kubeConfigPath !== userStore.kubeConfigPath;
|
||||
if (isChanged) {
|
||||
this.kubeConfigPath = this.kubeConfigPath.replace("~", os.homedir());
|
||||
try {
|
||||
this.setKubeConfig(this.kubeConfigPath, { throwError: true });
|
||||
} catch (err) {
|
||||
this.setKubeConfig(userStore.kubeConfigPath); // revert to previous valid path
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onKubeConfigTabChange = (tabId: KubeConfigSourceTab) => {
|
||||
this.sourceTab = tabId;
|
||||
this.error = "";
|
||||
this.refreshContexts();
|
||||
}
|
||||
|
||||
protected formatContextLabel = ({ value: context }: SelectOption<string>) => {
|
||||
const isNew = userStore.newContexts.has(context);
|
||||
const isSelected = this.selectedContexts.includes(context);
|
||||
return (
|
||||
<div className={cssNames("kube-context flex gaps align-center", context)}>
|
||||
<span>{context}</span>
|
||||
{isNew && <Icon small material="fiber_new"/>}
|
||||
{isSelected && <Icon small material="check" className="box right"/>}
|
||||
</div>
|
||||
)
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<WizardLayout className="AddCluster" infoPanel={this.renderInfo()}>
|
||||
<WizardLayout
|
||||
className="AddCluster"
|
||||
infoPanel={this.renderInfo()}
|
||||
contentClass={{ droppable: this.dropAreaActive }}
|
||||
contentProps={{
|
||||
onDragEnter: event => this.dropAreaActive = true,
|
||||
onDragLeave: event => this.dropAreaActive = false,
|
||||
onDragOver: event => {
|
||||
event.preventDefault(); // enable onDrop()-callback
|
||||
event.dataTransfer.dropEffect = "move"
|
||||
},
|
||||
onDrop: event => {
|
||||
this.sourceTab = KubeConfigSourceTab.FILE;
|
||||
this.dropAreaActive = false
|
||||
this.setKubeConfig(event.dataTransfer.files[0].path)
|
||||
}
|
||||
}}
|
||||
>
|
||||
<h2><Trans>Add Cluster</Trans></h2>
|
||||
<p>Choose config:</p>
|
||||
<Select
|
||||
placeholder={<Trans>Select kubeconfig</Trans>}
|
||||
value={this.clusterConfig}
|
||||
options={this.clusterOptions}
|
||||
onChange={({ value }: SelectOption) => this.clusterConfig = value}
|
||||
formatOptionLabel={this.formatClusterContextLabel}
|
||||
id="kubecontext-select"
|
||||
/>
|
||||
{this.renderKubeConfigSource()}
|
||||
{this.renderContextSelector()}
|
||||
<div className="cluster-settings">
|
||||
<a href="#" onClick={() => this.showSettings = !this.showSettings}>
|
||||
<Trans>Proxy settings</Trans>
|
||||
@@ -195,18 +383,6 @@ export class AddCluster extends React.Component {
|
||||
</small>
|
||||
</div>
|
||||
)}
|
||||
{this.isCustom && (
|
||||
<div className="custom-kubeconfig flex column gaps box grow">
|
||||
<p>Kubeconfig:</p>
|
||||
<AceEditor
|
||||
autoFocus
|
||||
showGutter={false}
|
||||
mode="yaml"
|
||||
value={this.customConfig}
|
||||
onChange={value => this.customConfig = value}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{this.error && (
|
||||
<div className="error">{this.error}</div>
|
||||
)}
|
||||
@@ -214,7 +390,7 @@ export class AddCluster extends React.Component {
|
||||
<Button
|
||||
primary
|
||||
label={<Trans>Add cluster(s)</Trans>}
|
||||
onClick={this.addCluster}
|
||||
onClick={this.addClusters}
|
||||
waiting={this.isWaiting}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user