Fine-tuning hidden metrics area

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

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>

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()}

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>
     );
   }
 }