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

Fine-tuning hidden metrics area

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-06-22 14:36:14 +03:00
parent 9a3c3ad1ce
commit 8af14ee8c5
3 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/renderer/components/cluster-settings/cluster-settings.tsx
View File

@ -114,8 +114,6 @@ export function MetricsSettings({ entity }: EntitySettingViewProps) {
<hr/> <hr/>
<section> <section>
<components.ClusterMetricsSetting cluster={cluster} /> <components.ClusterMetricsSetting cluster={cluster} />
</section>
<section>
<components.ShowMetricsSetting cluster={cluster} /> <components.ShowMetricsSetting cluster={cluster} />
</section> </section>
</section> </section>

2
src/renderer/components/cluster-settings/components/cluster-metrics-setting.tsx
View File

@ -119,7 +119,7 @@ export class ClusterMetricsSetting extends React.Component<Props> {
render() { render() {
return ( return (
<div className="MetricsSelect"> <div className="MetricsSelec0 mb-5">
<SubTitle title={"Hide metrics from the UI"}/> <SubTitle title={"Hide metrics from the UI"}/>
<div className="flex gaps"> <div className="flex gaps">
{this.renderMetricsSelect()} {this.renderMetricsSelect()}

21
src/renderer/components/cluster-settings/components/cluster-show-metrics.tsx
View File

@ -25,6 +25,7 @@ import type { Cluster } from "../../../../main/cluster";
import { observable, reaction, makeObservable } from "mobx"; import { observable, reaction, makeObservable } from "mobx";
import { Badge } from "../../badge/badge"; import { Badge } from "../../badge/badge";
import { Icon } from "../../icon/icon"; import { Icon } from "../../icon/icon";
import { Notice } from "../../+extensions/notice";
interface Props { interface Props {
cluster: Cluster; cluster: Cluster;
@ -55,14 +56,20 @@ export class ShowMetricsSetting extends React.Component<Props> {
} }
renderMetrics() { renderMetrics() {
const metrics = Array.from(this.hiddenMetrics);
if (!metrics.length) {
return (
<div className="flex-grow text-center">All metrics are visible on the UI</div>
);
}
return ( return (
metrics.map(name => {
Array.from(this.hiddenMetrics).map(name => {
const tooltipId = `${name}`; const tooltipId = `${name}`;
return ( return (
<Badge key={name}> <Badge key={name} flat>
<span id={tooltipId}>{name}</span> <span id={tooltipId}>{name}</span>
<Icon <Icon
smallest smallest
@ -79,9 +86,11 @@ export class ShowMetricsSetting extends React.Component<Props> {
render() { render() {
return ( return (
<div className="MetricsSelect flex wrap gaps"> <Notice>
{this.renderMetrics()} <div className="MetricsSelect flex wrap gaps leading-relaxed">
</div> {this.renderMetrics()}
</div>
</Notice>
); );
} }
} }