From 8af14ee8c547a08bb01d90b3e95377a08969a112 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Tue, 22 Jun 2021 14:36:14 +0300
Subject: [PATCH] Fine-tuning hidden metrics area

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../cluster-settings/cluster-settings.tsx     |  2 --
 .../components/cluster-metrics-setting.tsx    |  2 +-
 .../components/cluster-show-metrics.tsx       | 21 +++++++++++++------
 3 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/renderer/components/cluster-settings/cluster-settings.tsx b/src/renderer/components/cluster-settings/cluster-settings.tsx
index 85ee7b9fb0..451b0186fa 100644
--- a/src/renderer/components/cluster-settings/cluster-settings.tsx
+++ b/src/renderer/components/cluster-settings/cluster-settings.tsx
@@ -114,8 +114,6 @@ export function MetricsSettings({ entity }: EntitySettingViewProps) {
       <hr/>
       <section>
         <components.ClusterMetricsSetting cluster={cluster} />
-      </section>
-      <section>
         <components.ShowMetricsSetting cluster={cluster} />
       </section>
     </section>
diff --git a/src/renderer/components/cluster-settings/components/cluster-metrics-setting.tsx b/src/renderer/components/cluster-settings/components/cluster-metrics-setting.tsx
index a30fb823ae..8cce59bbe8 100644
--- a/src/renderer/components/cluster-settings/components/cluster-metrics-setting.tsx
+++ b/src/renderer/components/cluster-settings/components/cluster-metrics-setting.tsx
@@ -119,7 +119,7 @@ export class ClusterMetricsSetting extends React.Component<Props> {
   render() {
 
     return (
-      <div className="MetricsSelect">
+      <div className="MetricsSelec0 mb-5">
         <SubTitle title={"Hide metrics from the UI"}/>
         <div className="flex gaps">
           {this.renderMetricsSelect()}
diff --git a/src/renderer/components/cluster-settings/components/cluster-show-metrics.tsx b/src/renderer/components/cluster-settings/components/cluster-show-metrics.tsx
index 9a6d1e084f..6544f2325b 100644
--- a/src/renderer/components/cluster-settings/components/cluster-show-metrics.tsx
+++ b/src/renderer/components/cluster-settings/components/cluster-show-metrics.tsx
@@ -25,6 +25,7 @@ import type { Cluster } from "../../../../main/cluster";
 import { observable, reaction, makeObservable } from "mobx";
 import { Badge } from "../../badge/badge";
 import { Icon } from "../../icon/icon";
+import { Notice } from "../../+extensions/notice";
 
 interface Props {
   cluster: Cluster;
@@ -55,14 +56,20 @@ export class ShowMetricsSetting extends React.Component<Props> {
   }
 
   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 (
-
-      Array.from(this.hiddenMetrics).map(name => {
+      metrics.map(name => {
         const tooltipId = `${name}`;
 
         return (
-          <Badge key={name}>
+          <Badge key={name} flat>
             <span id={tooltipId}>{name}</span>
             <Icon
               smallest
@@ -79,9 +86,11 @@ export class ShowMetricsSetting extends React.Component<Props> {
   render() {
 
     return (
-      <div className="MetricsSelect flex wrap gaps">
-        {this.renderMetrics()}
-      </div>
+      <Notice>
+        <div className="MetricsSelect flex wrap gaps leading-relaxed">
+          {this.renderMetrics()}
+        </div>
+      </Notice>
     );
   }
 }