mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Fixing Cluster Settings layout (#651)
* A bit of cleaning in Add Cluster page Signed-off-by: alexfront <alex.andreev.email@gmail.com> * Adding head-col to WizardLayout Signed-off-by: alexfront <alex.andreev.email@gmail.com> * Fixing Cluster Settings general layout bugs Signed-off-by: alexfront <alex.andreev.email@gmail.com> * Cluster Status view refactoring Signed-off-by: alexfront <alex.andreev.email@gmail.com> * Install Metrics component refactoring Using notifications for error, removed picking button icon method, simplified button generation. Signed-off-by: alexfront <alex.andreev.email@gmail.com> * Remove icons / checks from RemoveClusterButton Signed-off-by: alexfront <alex.andreev.email@gmail.com> * Fixing colorError in Input styles Signed-off-by: alexfront <alex.andreev.email@gmail.com> * Preventing Input's spellchecking Signed-off-by: alexfront <alex.andreev.email@gmail.com> * ClusterNameSettings refactoring Signed-off-by: alexfront <alex.andreev.email@gmail.com> * ClusterWorkspaceSettings refactoring/fixing Signed-off-by: alexfront <alex.andreev.email@gmail.com> * ClusterProxySetting refactoring Signed-off-by: alexfront <alex.andreev.email@gmail.com> * ClusterPrometheusSetting refactoring Signed-off-by: alexfront <alex.andreev.email@gmail.com> * Clean up Removal section Signed-off-by: alexfront <alex.andreev.email@gmail.com> * Glued InstallMetrics & InstallUserMode into 1 component Signed-off-by: alexfront <alex.andreev.email@gmail.com> * Removing unused styles in Cluster Settings Signed-off-by: alexfront <alex.andreev.email@gmail.com> * Cluster Settings styling Signed-off-by: alexfront <alex.andreev.email@gmail.com> * Adding close button to settings header Signed-off-by: alexfront <alex.andreev.email@gmail.com> * ClusterHomeDirSetting refactoring Signed-off-by: alexfront <alex.andreev.email@gmail.com> * FilePicker restyling Signed-off-by: alexfront <alex.andreev.email@gmail.com> * Fixing Prometheus selector Signed-off-by: alexfront <alex.andreev.email@gmail.com> * Fixing Hashicon Passing cluster name instead of cluster id to prevent icon changing while typing new cluster name Signed-off-by: alexfront <alex.andreev.email@gmail.com> * Minor ClusterSettings fixes Signed-off-by: alexfront <alex.andreev.email@gmail.com> * Increasing opacity for non-interactive icons Signed-off-by: alexfront <alex.andreev.email@gmail.com> * Keep feature install loading state Waiting for props to change before disabling loading state (gray button width spinner) Signed-off-by: alexfront <alex.andreev.email@gmail.com> * Remove arrays in disposeOnUnmount() Signed-off-by: alexfront <alex.andreev.email@gmail.com> * Fix Cluster select behavior Now clicking cluster icon in sidebar always leads to / dashboard. And 'Settings' submenu switches active cluster at first and only the showing Cluster Settings Signed-off-by: alexfront <alex.andreev.email@gmail.com> * Using structuralComparator in feature installer Signed-off-by: alexfront <alex.andreev.email@gmail.com> * Saving input fields on blur Signed-off-by: alexfront <alex.andreev.email@gmail.com> * Setting Select color same as Input color Signed-off-by: alexfront <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev
GitHub
parent
1f5acdb9cd
commit
0f4248de68
@ -86,6 +86,10 @@ export class ClusterStore extends BaseStore<ClusterStoreModel> {
|
||||
return Array.from(this.clusters.values());
|
||||
}
|
||||
|
||||
setActive(id: ClusterId) {
|
||||
this.activeClusterId = id;
|
||||
}
|
||||
|
||||
hasClusters() {
|
||||
return this.clusters.size > 0;
|
||||
}
|
||||
|
||||
@ -124,7 +124,7 @@ export class AddCluster extends React.Component {
|
||||
to allow you to operate easily on multiple clusters and/or contexts.
|
||||
</p>
|
||||
<p>
|
||||
For more information on kubeconfig see <a href="https://kubernetes.io/docs/concepts/configuration/organize-cluster-access-kubeconfig/" target="_blank">Kubernetes docs</a>
|
||||
For more information on kubeconfig see <a href="https://kubernetes.io/docs/concepts/configuration/organize-cluster-access-kubeconfig/" target="_blank">Kubernetes docs</a>.
|
||||
</p>
|
||||
<p>
|
||||
NOTE: Any manually added cluster is not merged into your kubeconfig file.
|
||||
@ -137,22 +137,20 @@ export class AddCluster extends React.Component {
|
||||
app.
|
||||
</p>
|
||||
<a href="https://kubernetes.io/docs/reference/access-authn-authz/authentication/#option-1-oidc-authenticator" target="_blank">
|
||||
<h4>OIDC (OpenID Connect)</h4>
|
||||
<h3>OIDC (OpenID Connect)</h3>
|
||||
</a>
|
||||
<div>
|
||||
<p>
|
||||
When connecting Lens to OIDC enabled cluster, there's few things you as a user need to take into account.
|
||||
</p>
|
||||
<b>Dedicated refresh token</b>
|
||||
<p>
|
||||
As Lens app utilized kubeconfig is "disconnected" from your main kubeconfig Lens needs to have it's own refresh token it utilizes.
|
||||
If you share the refresh token with e.g. <code>kubectl</code> who ever uses the token first will invalidate it for the next user.
|
||||
One way to achieve this is with <a href="https://github.com/int128/kubelogin" target="_blank">kubelogin</a> tool by removing the tokens
|
||||
(both <code>id_token</code> and <code>refresh_token</code>) from
|
||||
the config and issuing <code>kubelogin</code> command. That'll take you through the login process and will result you having "dedicated" refresh token.
|
||||
</p>
|
||||
</div>
|
||||
<h4>Exec auth plugins</h4>
|
||||
<p>
|
||||
When connecting Lens to OIDC enabled cluster, there's few things you as a user need to take into account.
|
||||
</p>
|
||||
<p><b>Dedicated refresh token</b></p>
|
||||
<p>
|
||||
As Lens app utilized kubeconfig is "disconnected" from your main kubeconfig Lens needs to have it's own refresh token it utilizes.
|
||||
If you share the refresh token with e.g. <code>kubectl</code> who ever uses the token first will invalidate it for the next user.
|
||||
One way to achieve this is with <a href="https://github.com/int128/kubelogin" target="_blank">kubelogin</a> tool by removing the tokens
|
||||
(both <code>id_token</code> and <code>refresh_token</code>) from
|
||||
the config and issuing <code>kubelogin</code> command. That'll take you through the login process and will result you having "dedicated" refresh token.
|
||||
</p>
|
||||
<h3>Exec auth plugins</h3>
|
||||
<p>
|
||||
When using <a href="https://kubernetes.io/docs/reference/access-authn-authz/authentication/#configuration" target="_blank">exec auth</a> plugins make sure the paths that are used to call
|
||||
any binaries
|
||||
|
||||
@ -1,86 +1,85 @@
|
||||
.ClusterSettings {
|
||||
overflow-y: scroll;
|
||||
grid-template-columns: unset;
|
||||
grid-template-columns: unset;
|
||||
padding: 0;
|
||||
|
||||
.info-col {
|
||||
display: none;
|
||||
.head-col {
|
||||
justify-content: space-between;
|
||||
|
||||
:nth-child(2) {
|
||||
flex: 1 0 0;
|
||||
}
|
||||
|
||||
.content-col {
|
||||
margin-right: unset;
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: $grey-600;
|
||||
}
|
||||
}
|
||||
|
||||
.info-col {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.content-col {
|
||||
margin: 0;
|
||||
padding-top: $padding * 3;
|
||||
background-color: transparent;
|
||||
|
||||
.SubTitle {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
* {
|
||||
margin-top: 40px;
|
||||
.settings-wrapper {
|
||||
margin: 0 auto;
|
||||
width: 60%;
|
||||
min-width: 570px;
|
||||
max-width: 1000px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0px;
|
||||
}
|
||||
}
|
||||
> div {
|
||||
margin-top: $margin * 5;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.status-table {
|
||||
margin-top: 20px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 3fr;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
.loading {
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
|
||||
.Spinner {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.Input,.Select {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.Icon:not(.updated):not(.clean) {
|
||||
color: #ad0000;
|
||||
}
|
||||
|
||||
.Icon.updated {
|
||||
color: #00dd1d;
|
||||
}
|
||||
|
||||
.updated {
|
||||
animation: updated-name 1s 1;
|
||||
animation-fill-mode: forwards;
|
||||
animation-delay: 3s;
|
||||
}
|
||||
|
||||
@keyframes updated-name {
|
||||
from {opacity :1;}
|
||||
to {opacity :0;}
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input[type="text"]::placeholder {
|
||||
.admin-note {
|
||||
font-size: small;
|
||||
color: #707070;
|
||||
opacity: 0.5;
|
||||
margin-left: $margin;
|
||||
}
|
||||
|
||||
.button-area {
|
||||
margin-top: $margin * 2;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
color: white;
|
||||
.file-loader {
|
||||
margin-top: $margin * 2;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 5px;
|
||||
.hint {
|
||||
font-size: smaller;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.Spinner {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-color: transparent black;
|
||||
.status-table {
|
||||
margin: $margin * 3 0;
|
||||
|
||||
.Table {
|
||||
border: 1px solid var(--drawerSubtitleBackground);
|
||||
border-radius: $radius;
|
||||
|
||||
.TableRow {
|
||||
&:not(:last-of-type) {
|
||||
border-bottom: 1px solid var(--drawerSubtitleBackground);
|
||||
}
|
||||
|
||||
.value {
|
||||
flex-grow: 2;
|
||||
color: var(--textColorSecondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Input,.Select {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
@ -1,25 +1,43 @@
|
||||
import "./cluster-settings.scss"
|
||||
import "./cluster-settings.scss";
|
||||
|
||||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { observer } from "mobx-react";
|
||||
import { Features } from "./features"
|
||||
import { Removal } from "./removal"
|
||||
import { Status } from "./status"
|
||||
import { General } from "./general"
|
||||
import { getHostedCluster } from "../../../common/cluster-store"
|
||||
import { Features } from "./features";
|
||||
import { Removal } from "./removal";
|
||||
import { Status } from "./status";
|
||||
import { General } from "./general";
|
||||
import { getHostedCluster } from "../../../common/cluster-store";
|
||||
import { WizardLayout } from "../layout/wizard-layout";
|
||||
import { ClusterIcon } from "../cluster-icon";
|
||||
import { Icon } from "../icon";
|
||||
|
||||
@observer
|
||||
export class ClusterSettings extends React.Component {
|
||||
render() {
|
||||
const cluster = getHostedCluster();
|
||||
|
||||
const header = (
|
||||
<>
|
||||
<ClusterIcon
|
||||
cluster={cluster}
|
||||
showErrors={false}
|
||||
showTooltip={false}
|
||||
/>
|
||||
<h2>{cluster.preferences.clusterName}</h2>
|
||||
<Link to="/">
|
||||
<Icon material="close" big />
|
||||
</Link>
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<WizardLayout className="ClusterSettings">
|
||||
<Status cluster={cluster}></Status>
|
||||
<General cluster={cluster}></General>
|
||||
<Features cluster={cluster}></Features>
|
||||
<Removal cluster={cluster}></Removal>
|
||||
<WizardLayout header={header} className="ClusterSettings">
|
||||
<div className="settings-wrapper">
|
||||
<Status cluster={cluster}></Status>
|
||||
<General cluster={cluster}></General>
|
||||
<Features cluster={cluster}></Features>
|
||||
<Removal cluster={cluster}></Removal>
|
||||
</div>
|
||||
</WizardLayout>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,86 +1,43 @@
|
||||
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 { observable } from "mobx";
|
||||
import { observer } from "mobx-react";
|
||||
import { Cluster } from "../../../../main/cluster";
|
||||
import { Input } from "../../input";
|
||||
import { SubTitle } from "../../layout/sub-title";
|
||||
|
||||
interface Props {
|
||||
cluster: Cluster;
|
||||
cluster: Cluster;
|
||||
}
|
||||
|
||||
@observer
|
||||
export class ClusterHomeDirSetting extends React.Component<Props> {
|
||||
@observable directory = this.props.cluster.preferences.terminalCWD || "";
|
||||
@observable status = TextInputStatus.CLEAN;
|
||||
@observable errorText?: string;
|
||||
|
||||
save = () => {
|
||||
this.props.cluster.preferences.terminalCWD = this.directory;
|
||||
};
|
||||
|
||||
onChange = (value: string) => {
|
||||
this.directory = value;
|
||||
}
|
||||
|
||||
render() {
|
||||
return <>
|
||||
<h4>Working Directory</h4>
|
||||
<p>Set initial working directory for terminals. When set it will the `pwd` when a new terminal instance is opened for this cluster.</p>
|
||||
<Input
|
||||
theme="round-black"
|
||||
className="box grow"
|
||||
value={this.directory}
|
||||
onSubmit={this.onWorkingDirectorySubmit}
|
||||
onChange={this.onWorkingDirectoryChange}
|
||||
iconRight={this.getIconRight()}
|
||||
placeholder="$HOME"
|
||||
/>
|
||||
</>;
|
||||
}
|
||||
|
||||
@autobind()
|
||||
onWorkingDirectoryChange(directory: string, _e: React.ChangeEvent) {
|
||||
if (this.status === TextInputStatus.UPDATING) {
|
||||
console.log("prevent changing cluster directory while updating");
|
||||
return;
|
||||
}
|
||||
|
||||
this.status = this.dirDiffers(directory);
|
||||
this.directory = directory;
|
||||
}
|
||||
|
||||
dirDiffers(directory: string): TextInputStatus {
|
||||
const { terminalCWD = "" } = this.props.cluster.preferences;
|
||||
|
||||
return directory === terminalCWD ? 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-directory-setting-error-icon" size="16px" material="error">
|
||||
<Tooltip targetId="cluster-directory-setting-error-icon" position={TooltipPosition.TOP}>
|
||||
{this.errorText}
|
||||
</Tooltip>
|
||||
</Icon>
|
||||
}
|
||||
}
|
||||
|
||||
@autobind()
|
||||
onWorkingDirectorySubmit(directory: string) {
|
||||
if (this.dirDiffers(directory) !== TextInputStatus.DIRTY) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.status = TextInputStatus.UPDATING
|
||||
this.props.cluster.preferences.terminalCWD = directory;
|
||||
this.directory = directory;
|
||||
this.status = TextInputStatus.UPDATED
|
||||
return (
|
||||
<>
|
||||
<SubTitle title="Working Directory"/>
|
||||
<p>Terminal working directory.</p>
|
||||
<Input
|
||||
theme="round-black"
|
||||
value={this.directory}
|
||||
onChange={this.onChange}
|
||||
onBlur={this.save}
|
||||
placeholder="$HOME"
|
||||
/>
|
||||
<span className="hint">
|
||||
An explicit start path where the terminal will be launched,{" "}
|
||||
this is used as the current working directory (cwd) for the shell process.
|
||||
</span>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,16 +1,20 @@
|
||||
import React from "react";
|
||||
import { Cluster } from "../../../../main/cluster";
|
||||
import { clusterStore } from "../../../../common/cluster-store"
|
||||
import { Icon } from "../../icon";
|
||||
import { FilePicker, OverSizeLimitStyle } from "../../file-picker";
|
||||
import { autobind } from "../../../utils";
|
||||
import { Button } from "../../button";
|
||||
import { GeneralInputStatus } from "./statuses"
|
||||
import { observable } from "mobx";
|
||||
import { observer } from "mobx-react";
|
||||
import { SubTitle } from "../../layout/sub-title";
|
||||
import { ClusterIcon } from "../../cluster-icon";
|
||||
|
||||
enum GeneralInputStatus {
|
||||
CLEAN = "clean",
|
||||
ERROR = "error",
|
||||
}
|
||||
|
||||
interface Props {
|
||||
cluster: Cluster;
|
||||
cluster: Cluster;
|
||||
}
|
||||
|
||||
@observer
|
||||
@ -21,7 +25,6 @@ export class ClusterIconSetting extends React.Component<Props> {
|
||||
@autobind()
|
||||
async onIconPick([file]: File[]) {
|
||||
const { cluster } = this.props;
|
||||
|
||||
try {
|
||||
if (file) {
|
||||
const buf = Buffer.from(await file.arrayBuffer());
|
||||
@ -38,35 +41,36 @@ export class ClusterIconSetting extends React.Component<Props> {
|
||||
}
|
||||
|
||||
getClearButton() {
|
||||
const { cluster } = this.props;
|
||||
|
||||
if (cluster.preferences.icon) {
|
||||
return <Button accent onClick={() => this.onIconPick([])}>Clear</Button>
|
||||
if (this.props.cluster.preferences.icon) {
|
||||
return <Button tooltip="Revert back to default icon" accent onClick={() => this.onIconPick([])}>Clear</Button>
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return <>
|
||||
<h4>Cluster Icon</h4>
|
||||
<p>Set cluster icon. By default it is automatically generated. {this.getIconRight()}</p>
|
||||
<div className="center">
|
||||
<FilePicker
|
||||
accept="image/*"
|
||||
labelText="Browse for new icon..."
|
||||
onOverSizeLimit={OverSizeLimitStyle.FILTER}
|
||||
handler={this.onIconPick}
|
||||
const label = (
|
||||
<>
|
||||
<ClusterIcon
|
||||
cluster={this.props.cluster}
|
||||
showErrors={false}
|
||||
showTooltip={false}
|
||||
/>
|
||||
{this.getClearButton()}
|
||||
</div>
|
||||
</>;
|
||||
}
|
||||
|
||||
getIconRight(): React.ReactNode {
|
||||
switch (this.status) {
|
||||
case GeneralInputStatus.CLEAN:
|
||||
return null;
|
||||
case GeneralInputStatus.ERROR:
|
||||
return <Icon size="16px" material="error" title={this.errorText}></Icon>
|
||||
}
|
||||
{"Browse for new icon..."}
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<SubTitle title="Cluster Icon" />
|
||||
<p>Define cluster icon. By default automatically generated.</p>
|
||||
<div className="file-loader">
|
||||
<FilePicker
|
||||
accept="image/*"
|
||||
label={label}
|
||||
onOverSizeLimit={OverSizeLimitStyle.FILTER}
|
||||
handler={this.onIconPick}
|
||||
/>
|
||||
{this.getClearButton()}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,85 +1,40 @@
|
||||
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 { observable } from "mobx";
|
||||
import { observer } from "mobx-react";
|
||||
import { SubTitle } from "../../layout/sub-title";
|
||||
import { isRequired } from "../../input/input.validators";
|
||||
|
||||
interface Props {
|
||||
cluster: Cluster;
|
||||
cluster: Cluster;
|
||||
}
|
||||
|
||||
@observer
|
||||
export class ClusterNameSetting extends React.Component<Props> {
|
||||
@observable name = this.props.cluster.preferences.clusterName || "";
|
||||
@observable status = TextInputStatus.CLEAN;
|
||||
@observable errorText?: string;
|
||||
|
||||
save = () => {
|
||||
this.props.cluster.preferences.clusterName = this.name;
|
||||
};
|
||||
|
||||
onChange = (value: string) => {
|
||||
this.name = value;
|
||||
}
|
||||
|
||||
render() {
|
||||
return <>
|
||||
<h4>Cluster Name</h4>
|
||||
<p>Change cluster name:</p>
|
||||
<Input
|
||||
theme="round-black"
|
||||
className="box grow"
|
||||
value={this.name}
|
||||
onSubmit={this.onClusterNameSubmit}
|
||||
onChange={this.onClusterNameChange}
|
||||
iconRight={this.getIconRight()}
|
||||
/>
|
||||
</>;
|
||||
}
|
||||
|
||||
@autobind()
|
||||
onClusterNameChange(name: string, _e: React.ChangeEvent) {
|
||||
if (this.status === TextInputStatus.UPDATING) {
|
||||
console.log("prevent changing cluster name while updating");
|
||||
return;
|
||||
}
|
||||
|
||||
this.status = this.nameDiffers(name)
|
||||
this.name = name;
|
||||
}
|
||||
|
||||
nameDiffers(name: string): TextInputStatus {
|
||||
const { clusterName } = this.props.cluster.preferences;
|
||||
|
||||
return name === clusterName ? 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-name-setting-error-icon" size="16px" material="error">
|
||||
<Tooltip targetId="cluster-name-setting-error-icon" position={TooltipPosition.TOP}>
|
||||
{this.errorText}
|
||||
</Tooltip>
|
||||
</Icon>
|
||||
}
|
||||
}
|
||||
|
||||
@autobind()
|
||||
onClusterNameSubmit(name: string) {
|
||||
if (this.nameDiffers(name) !== TextInputStatus.DIRTY) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.status = TextInputStatus.UPDATING
|
||||
this.props.cluster.preferences.clusterName = name;
|
||||
this.name = name;
|
||||
this.status = TextInputStatus.UPDATED
|
||||
return (
|
||||
<>
|
||||
<SubTitle title="Cluster Name"/>
|
||||
<p>Define cluster name.</p>
|
||||
<Input
|
||||
theme="round-black"
|
||||
validators={isRequired}
|
||||
value={this.name}
|
||||
onChange={this.onChange}
|
||||
onBlur={this.save}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,41 +1,44 @@
|
||||
import React from "react";
|
||||
import { Cluster } from "../../../../main/cluster";
|
||||
import { clusterStore } from "../../../../common/cluster-store"
|
||||
import { Select, SelectOption, SelectProps } from "../../select";
|
||||
import { prometheusProviders } from "../../../../common/prometheus-providers";
|
||||
import { autobind } from "../../../utils";
|
||||
import { observable } from "mobx";
|
||||
import merge from "lodash/merge";
|
||||
import { observer } from "mobx-react";
|
||||
import { prometheusProviders } from "../../../../common/prometheus-providers";
|
||||
import { Cluster } from "../../../../main/cluster";
|
||||
import { SubTitle } from "../../layout/sub-title";
|
||||
import { Select, SelectOption } from "../../select";
|
||||
|
||||
const prometheusGuide = "https://github.com/lensapp/lens/blob/master/troubleshooting/custom-prometheus.md";
|
||||
const options: SelectOption<string>[] = [
|
||||
{ value: "", label: "Auto detect" },
|
||||
{ value: "", label: "Auto detect" },
|
||||
...prometheusProviders.map(pp => ({value: pp.id, label: pp.name}))
|
||||
];
|
||||
|
||||
interface Props {
|
||||
cluster: Cluster;
|
||||
cluster: Cluster;
|
||||
}
|
||||
|
||||
@observer
|
||||
export class ClusterPrometheusSetting extends React.Component<Props> {
|
||||
@observable prometheusProvider = this.props.cluster.preferences.prometheusProvider?.type || "";
|
||||
|
||||
render() {
|
||||
return <>
|
||||
<h4>Cluster Prometheus</h4>
|
||||
<p>Use pre-installed Prometheus service for metrics. Please refer to <a href={prometheusGuide}>this guide</a> for possible configuration changes.</p>
|
||||
<Select
|
||||
value={this.prometheusProvider}
|
||||
options={options}
|
||||
onChange={this.changePrometheusProvider}
|
||||
/>
|
||||
</>;
|
||||
}
|
||||
|
||||
@autobind()
|
||||
changePrometheusProvider({ value: prometheusProvider }: SelectProps<string>) {
|
||||
this.prometheusProvider = prometheusProvider;
|
||||
this.props.cluster.preferences.prometheusProvider = { type: prometheusProvider };
|
||||
return (
|
||||
<>
|
||||
<SubTitle title="Prometheus"/>
|
||||
<p>
|
||||
Use pre-installed Prometheus service for metrics. Please refer to the{" "}
|
||||
<a href="https://github.com/lensapp/lens/blob/master/troubleshooting/custom-prometheus.md" target="_blank">guide</a>{" "}
|
||||
for possible configuration changes.
|
||||
</p>
|
||||
<Select
|
||||
value={this.props.cluster.preferences.prometheusProvider?.type || ""}
|
||||
onChange={({value}) => {
|
||||
const provider = {
|
||||
prometheusProvider: {
|
||||
type: value
|
||||
}
|
||||
}
|
||||
merge(this.props.cluster.preferences, provider);
|
||||
}}
|
||||
options={options}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,105 +1,41 @@
|
||||
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 { 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 = () => {
|
||||
this.props.cluster.preferences.httpsProxy = this.proxy;
|
||||
};
|
||||
|
||||
onChange = (value: string) => {
|
||||
this.proxy = 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}
|
||||
onBlur={this.save}
|
||||
placeholder="http://<address>:<port>"
|
||||
validators={isUrl}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,36 +1,36 @@
|
||||
import React from "react";
|
||||
import { Cluster } from "../../../../main/cluster";
|
||||
import { clusterStore } from "../../../../common/cluster-store"
|
||||
import { workspaceStore } from "../../../../common/workspace-store"
|
||||
import { Select, SelectOption } from "../../../components/select";
|
||||
import { GeneralInputStatus } from "./statuses"
|
||||
import { observable } from "mobx";
|
||||
import { autobind } from "../../../utils";
|
||||
import { observer } from "mobx-react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { workspacesURL } from "../../+workspaces";
|
||||
import { workspaceStore } from "../../../../common/workspace-store";
|
||||
import { Cluster } from "../../../../main/cluster";
|
||||
import { Select } from "../../../components/select";
|
||||
import { SubTitle } from "../../layout/sub-title";
|
||||
|
||||
interface Props {
|
||||
cluster: Cluster;
|
||||
cluster: Cluster;
|
||||
}
|
||||
|
||||
@observer
|
||||
export class ClusterWorkspaceSetting extends React.Component<Props> {
|
||||
@observable workspace = this.props.cluster.workspace;
|
||||
|
||||
render() {
|
||||
return <>
|
||||
<h4>Cluster Workspace</h4>
|
||||
<p>Change cluster workspace:</p>
|
||||
<Select
|
||||
value={workspaceStore.currentWorkspaceId}
|
||||
options={workspaceStore.workspacesList.map(w => ({value: w.id, label: <span>{w.name}</span>}))}
|
||||
onChange={this.changeWorkspace}
|
||||
/>
|
||||
</>;
|
||||
}
|
||||
|
||||
@autobind()
|
||||
changeWorkspace({ value: workspace }: SelectOption<string>) {
|
||||
this.workspace = workspace;
|
||||
this.props.cluster.workspace = workspace;
|
||||
return (
|
||||
<>
|
||||
<SubTitle title="Cluster Workspace"/>
|
||||
<p>
|
||||
Define cluster{" "}
|
||||
<Link to={workspacesURL()}>
|
||||
workspace
|
||||
</Link>.
|
||||
</p>
|
||||
<Select
|
||||
value={this.props.cluster.workspace}
|
||||
onChange={({value}) => this.props.cluster.workspace = value}
|
||||
options={workspaceStore.workspacesList.map(w =>
|
||||
({value: w.id, label: w.name})
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,93 @@
|
||||
import React from "react";
|
||||
import { observable, reaction, comparer } from "mobx";
|
||||
import { observer, disposeOnUnmount } from "mobx-react";
|
||||
import { clusterIpc } from "../../../../common/cluster-ipc";
|
||||
import { Cluster } from "../../../../main/cluster";
|
||||
import { Button } from "../../button";
|
||||
import { Notifications } from "../../notifications";
|
||||
import { Spinner } from "../../spinner";
|
||||
|
||||
interface Props {
|
||||
cluster: Cluster
|
||||
feature: string
|
||||
}
|
||||
|
||||
@observer
|
||||
export class InstallFeature extends React.Component<Props> {
|
||||
@observable loading = false;
|
||||
|
||||
componentDidMount() {
|
||||
disposeOnUnmount(this,
|
||||
reaction(() => this.props.cluster.features[this.props.feature], () => {
|
||||
this.loading = false;
|
||||
}, { equals: comparer.structural })
|
||||
);
|
||||
}
|
||||
|
||||
getActionButtons() {
|
||||
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">
|
||||
{features.canUpgrade &&
|
||||
<Button
|
||||
primary
|
||||
disabled={disabled}
|
||||
onClick={this.runAction(() =>
|
||||
clusterIpc.upgradeFeature.invokeFromRenderer(cluster.id, feature))
|
||||
}
|
||||
>
|
||||
Upgrade
|
||||
</Button>
|
||||
}
|
||||
{features.installed &&
|
||||
<Button
|
||||
accent
|
||||
disabled={disabled}
|
||||
onClick={this.runAction(() =>
|
||||
clusterIpc.uninstallFeature.invokeFromRenderer(cluster.id, feature))
|
||||
}
|
||||
>
|
||||
Uninstall
|
||||
</Button>
|
||||
}
|
||||
{!features.installed && !features.canUpgrade &&
|
||||
<Button
|
||||
primary
|
||||
disabled={disabled}
|
||||
onClick={this.runAction(() =>
|
||||
clusterIpc.installFeature.invokeFromRenderer(cluster.id, feature))
|
||||
}
|
||||
>
|
||||
Install
|
||||
</Button>
|
||||
}
|
||||
{loadingIcon}
|
||||
{!cluster.isAdmin && <span className='admin-note'>Actions can only be performed by admins.</span>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
runAction(action: () => Promise<any>): () => Promise<void> {
|
||||
return async () => {
|
||||
try {
|
||||
this.loading = true;
|
||||
await action();
|
||||
} catch (err) {
|
||||
Notifications.error(err.toString());
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
{this.props.children}
|
||||
<div className="button-area">{this.getActionButtons()}</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,109 +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 { MetricsFeature } from "../../../../features/metrics";
|
||||
import { Spinner } from "../../spinner";
|
||||
import { Icon } from "../../icon";
|
||||
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 InstallMetrics extends React.Component<Props> {
|
||||
@observable status = ActionStatus.IDLE;
|
||||
@observable errorText?: string;
|
||||
|
||||
render() {
|
||||
return <>
|
||||
<h4>Metrics</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 />;
|
||||
case ActionStatus.ERROR:
|
||||
return <Icon 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[MetricsFeature.id]?.canUpgrade) {
|
||||
buttons.push(
|
||||
<Button key="upgrade" id="cluster-feature-metrics-upgrade" disabled={!cluster.isAdmin} primary onClick={this.runAction("upgradeFeature")}>
|
||||
Upgrade {this.getStatusIcon()} {this.getDisabledToolTip("cluster-feature-metrics-upgrade", "Upgrading")}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
if (cluster.features[MetricsFeature.id]?.installed) {
|
||||
buttons.push(
|
||||
<Button key="uninstall" id="cluster-feature-metrics-uninstall" disabled={!cluster.isAdmin} primary onClick={this.runAction("uninstallFeature")}>
|
||||
Uninstall {this.getStatusIcon()} {this.getDisabledToolTip("cluster-feature-metrics-uninstall", "Uninstalling")}
|
||||
</Button>
|
||||
);
|
||||
} else {
|
||||
buttons.push(
|
||||
<Button key="install" id="cluster-feature-metrics-install" disabled={!cluster.isAdmin} primary onClick={this.runAction("installFeature")}>
|
||||
Install {this.getStatusIcon()} {this.getDisabledToolTip("cluster-feature-metrics-install", "Installing")}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
return buttons;
|
||||
}
|
||||
|
||||
runAction(action: keyof typeof clusterIpc): () => Promise<void> {
|
||||
return async () => {
|
||||
const { cluster } = this.props;
|
||||
console.log(`running ${action} ${MetricsFeature.id} onto ${cluster.preferences.clusterName}`);
|
||||
|
||||
try {
|
||||
this.status = ActionStatus.PROCESSING
|
||||
await clusterIpc[action].invokeFromRenderer(cluster.id, MetricsFeature.id);
|
||||
try {
|
||||
await cluster.refresh();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
this.status = ActionStatus.IDLE
|
||||
} catch (err) {
|
||||
this.status = ActionStatus.ERROR
|
||||
this.errorText = err.toString()
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
@ -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()
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
@ -1,63 +1,37 @@
|
||||
import React from "react";
|
||||
import { Cluster } from "../../../../main/cluster";
|
||||
import { Button } from "../../button";
|
||||
import { autobind } from "../../../utils";
|
||||
import { Spinner } from "../../spinner";
|
||||
import { Icon } from "../../icon";
|
||||
import { ConfirmDialog } from "../../confirm-dialog";
|
||||
import { Trans } from "@lingui/macro";
|
||||
import { observer } from "mobx-react";
|
||||
import { clusterIpc } from "../../../../common/cluster-ipc";
|
||||
import { clusterStore } from "../../../../common/cluster-store";
|
||||
import { observable } from "mobx";
|
||||
import { observer } from "mobx-react";
|
||||
import { RemovalStatus } from "./statuses"
|
||||
import { Cluster } from "../../../../main/cluster";
|
||||
import { autobind } from "../../../utils";
|
||||
import { Button } from "../../button";
|
||||
import { ConfirmDialog } from "../../confirm-dialog";
|
||||
|
||||
interface Props {
|
||||
cluster: Cluster;
|
||||
cluster: Cluster;
|
||||
}
|
||||
|
||||
@observer
|
||||
export class RemoveClusterButton extends React.Component<Props> {
|
||||
@observable status = RemovalStatus.PRESENT;
|
||||
@observable errorText?: string;
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="center">
|
||||
<Button accent onClick={this.confirmRemoveCluster}>Remove Cluster {this.getStatusIcon()}</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
getStatusIcon(): React.ReactNode {
|
||||
switch (this.status) {
|
||||
case RemovalStatus.PRESENT:
|
||||
return null;
|
||||
case RemovalStatus.PROCESSING:
|
||||
return <Spinner />;
|
||||
case RemovalStatus.ERROR:
|
||||
return <Icon size="16px" material="error" title={this.errorText}></Icon>;
|
||||
}
|
||||
}
|
||||
|
||||
@autobind()
|
||||
@autobind()
|
||||
confirmRemoveCluster() {
|
||||
const { cluster } = this.props;
|
||||
|
||||
ConfirmDialog.open({
|
||||
message: <p>Are you sure you want to remove <b>{cluster.preferences.clusterName}</b> from Lens?</p>,
|
||||
labelOk: <Trans>Yes</Trans>,
|
||||
labelCancel: <Trans>No</Trans>,
|
||||
ok: async () => {
|
||||
try {
|
||||
this.status = RemovalStatus.PROCESSING;
|
||||
await clusterIpc.disconnect.invokeFromRenderer(cluster.id);
|
||||
await clusterStore.removeById(cluster.id);
|
||||
} catch (err) {
|
||||
this.status = RemovalStatus.ERROR;
|
||||
this.errorText = err.toString();
|
||||
}
|
||||
await clusterStore.removeById(cluster.id);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Button accent onClick={this.confirmRemoveCluster} className="button-area">
|
||||
Remove Cluster
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
export enum TextInputStatus {
|
||||
CLEAN = "clean",
|
||||
DIRTY = "dirty",
|
||||
UPDATING = "updating",
|
||||
ERROR = "error",
|
||||
UPDATED = "updated",
|
||||
}
|
||||
|
||||
export enum GeneralInputStatus {
|
||||
CLEAN = "clean",
|
||||
ERROR = "error",
|
||||
}
|
||||
|
||||
export enum ActionStatus {
|
||||
IDLE = "idle",
|
||||
PROCESSING = "processing",
|
||||
ERROR = "error"
|
||||
}
|
||||
|
||||
export enum RemovalStatus {
|
||||
PRESENT = "present",
|
||||
PROCESSING = "processing",
|
||||
ERROR = "error",
|
||||
}
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -15,8 +15,6 @@ export class General extends React.Component<Props> {
|
||||
render() {
|
||||
return <div>
|
||||
<h2>General</h2>
|
||||
<hr/>
|
||||
|
||||
<ClusterNameSetting cluster={this.props.cluster} />
|
||||
<ClusterWorkspaceSetting cluster={this.props.cluster} />
|
||||
<ClusterIconSetting cluster={this.props.cluster} />
|
||||
|
||||
@ -3,16 +3,18 @@ import { Cluster } from "../../../main/cluster";
|
||||
import { RemoveClusterButton } from "./components/remove-cluster-button";
|
||||
|
||||
interface Props {
|
||||
cluster: Cluster;
|
||||
cluster: Cluster;
|
||||
}
|
||||
|
||||
export class Removal extends React.Component<Props> {
|
||||
render() {
|
||||
const { cluster } = this.props;
|
||||
|
||||
return <div>
|
||||
<h2>Removal</h2>
|
||||
<RemoveClusterButton cluster={cluster} />
|
||||
</div>;
|
||||
return (
|
||||
<div>
|
||||
<h2>Removal</h2>
|
||||
<RemoveClusterButton cluster={cluster} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,41 +1,40 @@
|
||||
import React from "react";
|
||||
import { Spinner } from "../spinner";
|
||||
import { Cluster } from "../../../main/cluster";
|
||||
import { SubTitle } from "../layout/sub-title";
|
||||
import { Table, TableCell, TableRow } from "../table";
|
||||
|
||||
interface Props {
|
||||
cluster: Cluster;
|
||||
}
|
||||
|
||||
export class Status extends React.Component<Props> {
|
||||
renderStatusRows(): JSX.Element[] {
|
||||
renderStatusRows() {
|
||||
const { cluster } = this.props;
|
||||
|
||||
const rows: [string, React.ReactNode][] = [
|
||||
const rows = [
|
||||
["Online Status", cluster.online ? "online" : `offline (${cluster.failureReason || "unknown reason"}`],
|
||||
["Distribution", cluster.distribution],
|
||||
["Kerbel Version", cluster.version],
|
||||
["API Address", cluster.apiUrl],
|
||||
["Nodes Count", cluster.nodes || "0"]
|
||||
];
|
||||
|
||||
if (cluster.nodes > 0) {
|
||||
rows.push(["Nodes Count", cluster.nodes]);
|
||||
}
|
||||
|
||||
return rows
|
||||
.map(([header, value]) => [
|
||||
<h5 key={header+"-header"}>{header}</h5>,
|
||||
<span key={header + "-value"}>{value}</span>
|
||||
])
|
||||
.flat();
|
||||
return (
|
||||
<Table scrollable={false}>
|
||||
{rows.map(([name, value]) => {
|
||||
return (
|
||||
<TableRow key={name}>
|
||||
<TableCell>{name}</TableCell>
|
||||
<TableCell className="value">{value}</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</Table>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { cluster } = this.props;
|
||||
|
||||
return <div>
|
||||
<h2>Status</h2>
|
||||
<hr/>
|
||||
<h4>Cluster status</h4>
|
||||
<SubTitle title="Cluster Status"/>
|
||||
<p>
|
||||
Cluster status information including: detected distribution, kernel version, and online status.
|
||||
</p>
|
||||
|
||||
@ -7,6 +7,12 @@
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
|
||||
&.interactive {
|
||||
img {
|
||||
opacity: .55;
|
||||
}
|
||||
}
|
||||
|
||||
&.active, &.interactive:hover {
|
||||
background-color: #fff;
|
||||
|
||||
@ -16,7 +22,6 @@
|
||||
}
|
||||
|
||||
img {
|
||||
opacity: .55;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
}
|
||||
|
||||
@ -42,12 +42,12 @@ export class ClusterIcon extends React.Component<Props> {
|
||||
active: isActive,
|
||||
});
|
||||
return (
|
||||
<div {...elemProps} className={className} id={clusterIconId}>
|
||||
<div {...elemProps} className={className} id={showTooltip ? clusterIconId : null}>
|
||||
{showTooltip && (
|
||||
<Tooltip targetId={clusterIconId}>{clusterName}</Tooltip>
|
||||
)}
|
||||
{icon && <img src={icon} alt={clusterName}/>}
|
||||
{!icon && <Hashicon value={clusterName} options={options}/>}
|
||||
{!icon && <Hashicon value={clusterId} options={options}/>}
|
||||
{showErrors && isAdmin && eventCount > 0 && (
|
||||
<Badge
|
||||
className={cssNames("events-count", errorClass)}
|
||||
|
||||
@ -33,11 +33,8 @@ export class ClustersMenu extends React.Component<Props> {
|
||||
@observable showHint = true;
|
||||
|
||||
showCluster = (clusterId: ClusterId) => {
|
||||
if (clusterStore.activeClusterId === clusterId) {
|
||||
navigate("/"); // redirect to index
|
||||
} else {
|
||||
clusterStore.activeClusterId = clusterId;
|
||||
}
|
||||
clusterStore.setActive(clusterId);
|
||||
navigate("/"); // redirect to index
|
||||
}
|
||||
|
||||
addCluster = () => {
|
||||
@ -50,7 +47,10 @@ export class ClustersMenu extends React.Component<Props> {
|
||||
|
||||
menu.append(new MenuItem({
|
||||
label: _i18n._(t`Settings`),
|
||||
click: () => navigate(clusterSettingsURL())
|
||||
click: () => {
|
||||
clusterStore.setActive(cluster.id);
|
||||
navigate(clusterSettingsURL())
|
||||
}
|
||||
}));
|
||||
if (cluster.online) {
|
||||
menu.append(new MenuItem({
|
||||
|
||||
@ -1,14 +1,11 @@
|
||||
.FilePicker {
|
||||
input[type="file"] {
|
||||
display: none;
|
||||
}
|
||||
input[type="file"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
border: medium solid;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
margin: 5px;
|
||||
}
|
||||
label {
|
||||
display: inline-flex;
|
||||
cursor: pointer;
|
||||
color: var(--blue);
|
||||
}
|
||||
}
|
||||
@ -43,7 +43,7 @@ export enum OverTotalSizeLimitStyle {
|
||||
|
||||
export interface BaseProps {
|
||||
accept?: string;
|
||||
labelText: string;
|
||||
label: React.ReactNode;
|
||||
multiple?: boolean;
|
||||
|
||||
// limit is the optional maximum number of files to upload
|
||||
@ -175,10 +175,10 @@ export class FilePicker extends React.Component<Props> {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { accept, labelText, multiple } = this.props;
|
||||
const { accept, label, multiple } = this.props;
|
||||
|
||||
return <div className="FilePicker">
|
||||
<label htmlFor="file-upload">{labelText} {this.getIconRight()}</label>
|
||||
<label className="flex gaps align-center" htmlFor="file-upload">{label} {this.getIconRight()}</label>
|
||||
<input
|
||||
id="file-upload"
|
||||
name="FilePicker"
|
||||
|
||||
@ -74,7 +74,7 @@
|
||||
|
||||
.input-info {
|
||||
.errors {
|
||||
color: var(color-error);
|
||||
color: var(--colorError);
|
||||
font-size: $font-size-small;
|
||||
}
|
||||
|
||||
|
||||
@ -285,6 +285,7 @@ export class Input extends React.Component<InputProps, State> {
|
||||
rows: multiLine ? (rows || 1) : null,
|
||||
ref: this.bindRef,
|
||||
type: "text",
|
||||
spellCheck: "false",
|
||||
});
|
||||
|
||||
return (
|
||||
|
||||
@ -13,6 +13,11 @@
|
||||
padding: $spacing;
|
||||
}
|
||||
|
||||
> .head-col {
|
||||
position: sticky;
|
||||
border-bottom: 1px solid $grey-800;
|
||||
}
|
||||
|
||||
> .content-col {
|
||||
margin-right: $spacing;
|
||||
background-color: var(--clusters-menu-bgc);
|
||||
@ -29,6 +34,10 @@
|
||||
border-left: 1px solid #353a3e;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 140%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $colorInfo;
|
||||
}
|
||||
|
||||
@ -5,6 +5,8 @@ import { cssNames, IClassName } from "../../utils";
|
||||
|
||||
interface Props {
|
||||
className?: IClassName;
|
||||
header?: React.ReactNode;
|
||||
headerClass?: IClassName;
|
||||
contentClass?: IClassName;
|
||||
infoPanelClass?: IClassName;
|
||||
infoPanel?: React.ReactNode;
|
||||
@ -13,9 +15,14 @@ interface Props {
|
||||
@observer
|
||||
export class WizardLayout extends React.Component<Props> {
|
||||
render() {
|
||||
const { className, contentClass, infoPanelClass, infoPanel, children: content } = this.props;
|
||||
const { className, contentClass, infoPanelClass, infoPanel, header, headerClass, children: content } = this.props;
|
||||
return (
|
||||
<div className={cssNames("WizardLayout", className)}>
|
||||
{header && (
|
||||
<div className={cssNames("head-col flex gaps align-center", headerClass)}>
|
||||
{header}
|
||||
</div>
|
||||
)}
|
||||
<div className={cssNames("content-col flex column gaps", contentClass)}>
|
||||
{content}
|
||||
</div>
|
||||
|
||||
@ -31,7 +31,7 @@ html {
|
||||
border-radius: $radius;
|
||||
background: transparent;
|
||||
min-height: 0;
|
||||
box-shadow: 0 0 0 1px $halfGray;
|
||||
box-shadow: 0 0 0 1px $borderFaintColor;
|
||||
|
||||
&--is-focused {
|
||||
box-shadow: 0 0 0 2px $primary;
|
||||
@ -42,6 +42,10 @@ html {
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
&__single-value {
|
||||
color: var(--textColorSecondary);
|
||||
}
|
||||
|
||||
&__indicator {
|
||||
padding: $padding /2;
|
||||
opacity: .55;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user