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

fix cluster settings page layout

Browse Source 
Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
This commit is contained in:
Jari Kolehmainen 2021-04-14 14:23:15 +03:00
parent 6c7095fdec
commit cff8a70c90
13 changed files with 152 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/renderer/components/+add-cluster/add-cluster.tsx
View File

@ -343,7 +343,7 @@ export class AddCluster extends React.Component {
return (
<DropFileInput onDropFiles={this.onDropKubeConfig}>
<PageLayout className="AddClusters" header={<><Icon svg="logo-lens" big /> <h2>Add Clusters</h2></>} showOnTop={true}>
<PageLayout className="AddClusters" showOnTop={true}>
<h2>Add Clusters from Kubeconfig</h2>
{this.renderInfo()}
{this.renderKubeConfigSource()}

30
src/renderer/components/+cluster-settings/cluster-settings.scss
View File

@ -1,9 +1,6 @@
.ClusterSettings {
$spacing: $padding * 3;
> .content-wrapper {
--flex-gap: #{$spacing};
}
// TODO: move sub-component styles to separate files
.admin-note {
@ -20,32 +17,7 @@
margin-top: $margin * 2;
}
.status-table {
margin: $spacing 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;
word-break: break-word;
color: var(--textColorSecondary);
}
.link {
@include pseudo-link;
}
}
}
}
.Input, .Select {
margin-top: $padding;
}
}
}

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

@ -1,11 +1,9 @@
import "./cluster-settings.scss";
import React from "react";
import { reaction } from "mobx";
import { observable, reaction } from "mobx";
import { RouteComponentProps } from "react-router";
import { observer, disposeOnUnmount } from "mobx-react";
import { Status } from "./status";
import { General } from "./general";
import { Cluster } from "../../../main/cluster";
import { IClusterSettingsRouteParams } from "./cluster-settings.route";
import { clusterStore } from "../../../common/cluster-store";
@ -13,12 +11,26 @@ import { PageLayout } from "../layout/page-layout";
import { requestMain } from "../../../common/ipc";
import { clusterActivateHandler, clusterRefreshHandler } from "../../../common/cluster-ipc";
import { navigation } from "../../navigation";
import { Tabs, Tab } from "../tabs";
import { ClusterProxySetting } from "./components/cluster-proxy-setting";
import { ClusterNameSetting } from "./components/cluster-name-setting";
import { ClusterHomeDirSetting } from "./components/cluster-home-dir-setting";
import { ClusterAccessibleNamespaces } from "./components/cluster-accessible-namespaces";
import { ClusterMetricsSetting } from "./components/cluster-metrics-setting";
import { ShowMetricsSetting } from "./components/show-metrics";
import { ClusterPrometheusSetting } from "./components/cluster-prometheus-setting";
import { ClusterKubeconfig } from "./components/cluster-kubeconfig";
interface Props extends RouteComponentProps<IClusterSettingsRouteParams> {
}
const clusterPages = ["General", "Proxy", "Terminal", "Namespaces", "Metrics"];
@observer
export class ClusterSettings extends React.Component<Props> {
@observable activeTab = "General";
get clusterId() {
return this.props.match.params.clusterId;
}
@ -49,6 +61,24 @@ export class ClusterSettings extends React.Component<Props> {
}
};
onTabChange = (tabId: string) => {
this.activeTab = tabId;
};
renderNavigation() {
return (
<>
<h2>{this.cluster.name}</h2>
<Tabs className="flex column" scrollable={false} onChange={this.onTabChange} value={this.activeTab}>
<div className="header">Cluster Settings</div>
{ clusterPages.map((page) => {
return <Tab key={page} value={page} label={page} data-testid={`${page}-tab`} />;
})}
</Tabs>
</>
);
}
render() {
const cluster = this.cluster;
@ -60,9 +90,70 @@ export class ClusterSettings extends React.Component<Props> {
);
return (
<PageLayout className="ClusterSettings" header={header} showOnTop={true}>
<Status cluster={cluster}></Status>
<General cluster={cluster}></General>
<PageLayout
className="ClusterSettings"
navigation={this.renderNavigation()}
showOnTop={true}
contentGaps={false}
>
{this.activeTab == "General" && (
<section>
<h2 data-testid="general-header">General</h2>
<section>
<section>
<ClusterNameSetting cluster={cluster} />
</section>
<section>
<ClusterKubeconfig cluster={cluster} />
</section>
</section>
</section>
)}
{this.activeTab == "Proxy" && (
<section>
<h2 data-testid="proxy-header">Proxy</h2>
<section>
<ClusterProxySetting cluster={cluster} />
</section>
</section>
)}
{this.activeTab == "Terminal" && (
<section>
<h2 data-testid="terminal-header">Terminal</h2>
<section>
<ClusterHomeDirSetting cluster={cluster} />
</section>
</section>
)}
{this.activeTab == "Namespaces" && (
<section>
<h2 data-testid="namespaces-header">Namespaces</h2>
<section>
<ClusterAccessibleNamespaces cluster={cluster} />
</section>
</section>
)}
{this.activeTab == "Metrics" && (
<section>
<h2 data-testid="metrics-header">Metrics</h2>
<section>
<section>
<ClusterPrometheusSetting cluster={cluster} />
</section>
<section>
<ClusterMetricsSetting cluster={cluster}/>
</section>
<section>
<ShowMetricsSetting cluster={cluster}/>
</section>
</section>
</section>
)}
</PageLayout>
);
}

4
src/renderer/components/+cluster-settings/components/cluster-accessible-namespaces.tsx
View File

@ -17,7 +17,6 @@ export class ClusterAccessibleNamespaces extends React.Component<Props> {
return (
<>
<SubTitle title="Accessible Namespaces" id="accessible-namespaces" />
<p>This setting is useful for manually specifying which namespaces you have access to. This is useful when you do not have permissions to list namespaces.</p>
<EditableList
placeholder="Add new namespace..."
add={(newNamespace) => {
@ -30,6 +29,9 @@ export class ClusterAccessibleNamespaces extends React.Component<Props> {
this.props.cluster.accessibleNamespaces = Array.from(this.namespaces);
}}
/>
<small className="hint">
This setting is useful for manually specifying which namespaces you have access to. This is useful when you do not have permissions to list namespaces.
</small>
</>
);
}

1
src/renderer/components/+cluster-settings/components/cluster-home-dir-setting.tsx
View File

@ -33,7 +33,6 @@ export class ClusterHomeDirSetting extends React.Component<Props> {
return (
<>
<SubTitle title="Working Directory"/>
<p>Terminal working directory.</p>
<Input
theme="round-black"
value={this.directory}

34
src/renderer/components/+cluster-settings/components/cluster-kubeconfig.tsx Normal file
View File

@ -0,0 +1,34 @@
import React from "react";
import { Cluster } from "../../../../main/cluster";
import { observer } from "mobx-react";
import { SubTitle } from "../../layout/sub-title";
import { autobind } from "../../../../common/utils";
import { shell } from "electron";
interface Props {
cluster: Cluster;
}
@observer
export class ClusterKubeconfig extends React.Component<Props> {
@autobind()
openKubeconfig() {
const { cluster } = this.props;
shell.showItemInFolder(cluster.kubeConfigPath);
}
render() {
return (
<>
<SubTitle title="Kubeconfig" />
<span>
<a className="link value" onClick={this.openKubeconfig}>{this.props.cluster.kubeConfigPath}</a>
</span>
</>
);
}
}

1
src/renderer/components/+cluster-settings/components/cluster-name-setting.tsx
View File

@ -34,7 +34,6 @@ export class ClusterNameSetting extends React.Component<Props> {
return (
<>
<SubTitle title="Cluster Name" />
<p>Define cluster name.</p>
<Input
theme="round-black"
validators={isRequired}

3
src/renderer/components/+cluster-settings/components/cluster-prometheus-setting.tsx
View File

@ -81,13 +81,12 @@ export class ClusterPrometheusSetting extends React.Component<Props> {
render() {
return (
<>
<SubTitle title="Prometheus"/>
<SubTitle title="Prometheus installation method"/>
<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" rel="noreferrer">guide</a>{" "}
for possible configuration changes.
</p>
<p>Prometheus installation method.</p>
<Select
value={this.provider}
onChange={({value}) => {

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

@ -33,7 +33,6 @@ export class ClusterProxySetting extends React.Component<Props> {
return (
<>
<SubTitle title="HTTP Proxy" />
<p>HTTP Proxy server. Used for communicating with Kubernetes API.</p>
<Input
theme="round-black"
value={this.proxy}
@ -42,6 +41,9 @@ export class ClusterProxySetting extends React.Component<Props> {
placeholder="http://<address>:<port>"
validators={this.proxy ? InputValidators.isUrl : undefined}
/>
<small className="hint">
HTTP Proxy server. Used for communicating with Kubernetes API.
</small>
</>
);
}

61
src/renderer/components/+cluster-settings/status.tsx
View File

@ -1,61 +0,0 @@
import React from "react";
import { Cluster } from "../../../main/cluster";
import { SubTitle } from "../layout/sub-title";
import { Table, TableCell, TableRow } from "../table";
import { autobind } from "../../utils";
import { shell } from "electron";
interface Props {
cluster: Cluster;
}
export class Status extends React.Component<Props> {
@autobind()
openKubeconfig() {
const { cluster } = this.props;
shell.showItemInFolder(cluster.kubeConfigPath);
}
renderStatusRows() {
const { cluster } = this.props;
const rows = [
["Online Status", cluster.online ? "online" : `offline (${cluster.failureReason || "unknown reason"})`],
["Distribution", cluster.metadata.distribution ? String(cluster.metadata.distribution) : "N/A"],
["Kernel Version", cluster.metadata.version ? String(cluster.metadata.version) : "N/A"],
["API Address", cluster.apiUrl || "N/A"],
["Nodes Count", cluster.metadata.nodes ? String(cluster.metadata.nodes) : "N/A"]
];
return (
<Table scrollable={false}>
{rows.map(([name, value]) => {
return (
<TableRow key={name}>
<TableCell>{name}</TableCell>
<TableCell className="value">{value}</TableCell>
</TableRow>
);
})}
<TableRow>
<TableCell>Kubeconfig</TableCell>
<TableCell className="link value" onClick={this.openKubeconfig}>{cluster.kubeConfigPath}</TableCell>
</TableRow>
</Table>
);
}
render() {
return <div>
<h2>Status</h2>
<SubTitle title="Cluster Status"/>
<p>
Cluster status information including: detected distribution, kernel version, and online status.
</p>
<div className="status-table">
{this.renderStatusRows()}
</div>
</div>;
}
}

3
src/renderer/components/+extensions/extensions.tsx
View File

@ -482,12 +482,11 @@ export class Extensions extends React.Component {
}
render() {
const topHeader = <h2>Manage Lens Extensions</h2>;
const { installPath } = this;
return (
<DropFileInput onDropFiles={this.installOnDrop}>
<PageLayout showOnTop className="Extensions" header={topHeader} contentGaps={false}>
<PageLayout showOnTop className="Extensions" contentGaps={false}>
<h2>Lens Extensions</h2>
<div>
Add new features and functionality via Lens Extensions.

10
src/renderer/components/layout/page-layout.scss
View File

@ -42,6 +42,16 @@
width: 218px;
padding: 60px 10px 60px 20px;
h2 {
margin-bottom: 10px;
font-size: 18px;
padding: 6px 10px;
overflow-wrap: anywhere;
color: var(--textColorAccent);
text-transform: uppercase;
font-weight: 600;
}
.Tabs {
.header {
padding: 6px 10px;

4
src/renderer/components/layout/page-layout.tsx
View File

@ -8,8 +8,6 @@ import { Icon } from "../icon";
export interface PageLayoutProps extends React.DOMAttributes<any> {
className?: IClassName;
header?: React.ReactNode;
headerClass?: IClassName;
contentClass?: IClassName;
provideBackButtonNavigation?: boolean;
contentGaps?: boolean;
@ -57,7 +55,7 @@ export class PageLayout extends React.Component<PageLayoutProps> {
render() {
const {
contentClass, headerClass, provideBackButtonNavigation,
contentClass, provideBackButtonNavigation,
contentGaps, showOnTop, navigation, children, ...elemProps
} = this.props;
const className = cssNames("PageLayout", { showOnTop, showNavigation: navigation }, this.props.className);