From 7d5af72bb967e223b8f4e1bb60410342e723c8a5 Mon Sep 17 00:00:00 2001
From: Sofia Shnaidman <sshnaidman@provectus.com>
Date: Tue, 3 Nov 2020 00:10:48 +0300
Subject: [PATCH] Added cluster status to sidebar.

---
 .../src/components/Nav/ClusterMenu.tsx        | 23 ++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/kafka-ui-react-app/src/components/Nav/ClusterMenu.tsx b/kafka-ui-react-app/src/components/Nav/ClusterMenu.tsx
index cc3d417906..37ed614f96 100644
--- a/kafka-ui-react-app/src/components/Nav/ClusterMenu.tsx
+++ b/kafka-ui-react-app/src/components/Nav/ClusterMenu.tsx
@@ -1,5 +1,5 @@
 import React, { CSSProperties } from 'react';
-import { Cluster } from 'redux/interfaces';
+import { Cluster, ClusterStatus } from 'redux/interfaces';
 import { NavLink } from 'react-router-dom';
 import {
   clusterBrokersPath,
@@ -30,6 +30,26 @@ const DefaultIcon: React.FC = () => {
   );
 };
 
+const StatusIcon: React.FC<Props> = ({ cluster }) => {
+  const style: CSSProperties = {
+    width: '10px',
+    height: '10px',
+    borderRadius: '5px',
+    marginLeft: '7px',
+    padding: 0,
+  };
+
+  return (
+    <span
+      className={`tag ${
+        cluster.status === ClusterStatus.Online ? 'is-primary' : 'is-danger'
+      }`}
+      title={cluster.status}
+      style={style}
+    />
+  );
+};
+
 const ClusterMenu: React.FC<Props> = ({ cluster }) => (
   <ul className="menu-list">
     <li>
@@ -41,6 +61,7 @@ const ClusterMenu: React.FC<Props> = ({ cluster }) => (
       >
         {cluster.defaultCluster && <DefaultIcon />}
         {cluster.name}
+        <StatusIcon cluster={cluster} />
       </NavLink>
       <ul>
         <NavLink