From 3eb74bdaea40fa481e5bb5eb6ade3a1d2829de78 Mon Sep 17 00:00:00 2001
From: Oleg Shuralev <workshur@gmail.com>
Date: Sun, 12 Jan 2020 02:12:16 +0300
Subject: [PATCH] [UI] Cleanup

---
 frontend/src/components/App.scss              |  1 +
 frontend/src/components/Brokers/Brokers.tsx   | 24 +++++-----
 .../src/components/Topics/Details/Details.tsx | 44 ++++++++++++-------
 .../Topics/Details/Overview/Overview.tsx      | 14 ++++--
 .../components/common/Dashboard/Indicator.tsx |  8 ++--
 5 files changed, 55 insertions(+), 36 deletions(-)

diff --git a/frontend/src/components/App.scss b/frontend/src/components/App.scss
index 2922058d3b..2508994b1b 100644
--- a/frontend/src/components/App.scss
+++ b/frontend/src/components/App.scss
@@ -7,6 +7,7 @@ $navbar-width: 250px;
       0 0.9375rem 1.40625rem rgba(4,9,20,0.03),
       0 0.25rem 0.53125rem rgba(4,9,20,0.05),
       0 0.125rem 0.1875rem rgba(4,9,20,0.03);
+    z-index: 31;
   }
 
   &__container {
diff --git a/frontend/src/components/Brokers/Brokers.tsx b/frontend/src/components/Brokers/Brokers.tsx
index 3c947ff2fa..32b9f32576 100644
--- a/frontend/src/components/Brokers/Brokers.tsx
+++ b/frontend/src/components/Brokers/Brokers.tsx
@@ -53,13 +53,13 @@ const Topics: React.FC<Props> = ({
       <Breadcrumb>Brokers overview</Breadcrumb>
 
       <MetricsWrapper title="Uptime">
-        <Indicator title="Total Brokers">
+        <Indicator label="Total Brokers">
           {brokerCount}
         </Indicator>
-        <Indicator title="Active Controllers">
+        <Indicator label="Active Controllers">
           {activeControllers}
         </Indicator>
-        <Indicator title="Zookeeper Status">
+        <Indicator label="Zookeeper Status">
           <span className={cx('tag', zkOnline ? 'is-primary' : 'is-danger')}>
             {zkOnline ? 'Online' : 'Offline'}
           </span>
@@ -67,21 +67,21 @@ const Topics: React.FC<Props> = ({
       </MetricsWrapper>
 
       <MetricsWrapper title="Partitions">
-        <Indicator title="Online">
+        <Indicator label="Online">
           <span className={cx({'has-text-danger': offlinePartitionCount !== 0})}>
             {onlinePartitionCount}
           </span>
           <span className="subtitle has-text-weight-light"> of {onlinePartitionCount + offlinePartitionCount}</span>
         </Indicator>
-        <Indicator title="Under Replicated">
+        <Indicator label="URP" title="Under replicated partitions">
           {underReplicatedPartitionCount}
         </Indicator>
-        <Indicator title="In Sync Replicas">
+        <Indicator label="In Sync Replicas">
           <span className="has-text-grey-lighter">
             Soon
           </span>
         </Indicator>
-        <Indicator title="Out of Sync Replicas">
+        <Indicator label="Out of Sync Replicas">
           <span className="has-text-grey-lighter">
             Soon
           </span>
@@ -89,15 +89,15 @@ const Topics: React.FC<Props> = ({
       </MetricsWrapper>
 
       <MetricsWrapper title="Disk">
-        <Indicator title="Max usage">
+        <Indicator label="Max usage">
           {maxDiskUsageValue}
           <span className="subtitle has-text-weight-light"> {maxDiskUsageSize}</span>
         </Indicator>
-        <Indicator title="Min usage">
+        <Indicator label="Min usage">
           {minDiskUsageValue}
           <span className="subtitle has-text-weight-light"> {minDiskUsageSize}</span>
         </Indicator>
-        <Indicator title="Distribution">
+        <Indicator label="Distribution">
           <span className="is-capitalized">
             {diskUsageDistribution}
           </span>
@@ -105,11 +105,11 @@ const Topics: React.FC<Props> = ({
       </MetricsWrapper>
 
       <MetricsWrapper title="System">
-        <Indicator title="Network pool usage">
+        <Indicator label="Network pool usage">
           {Math.round(networkPoolUsage * 10000) / 100}
           <span className="subtitle has-text-weight-light">%</span>
         </Indicator>
-        <Indicator title="Request pool usage">
+        <Indicator label="Request pool usage">
           {Math.round(requestPoolUsage * 10000) / 100}
           <span className="subtitle has-text-weight-light">%</span>
         </Indicator>
diff --git a/frontend/src/components/Topics/Details/Details.tsx b/frontend/src/components/Topics/Details/Details.tsx
index c916911af4..fd1abc3d79 100644
--- a/frontend/src/components/Topics/Details/Details.tsx
+++ b/frontend/src/components/Topics/Details/Details.tsx
@@ -28,26 +28,36 @@ const Details: React.FC<Props> = ({
             {topicName}
           </Breadcrumb>
         </div>
-        <div className="level-item level-right">
-
-        </div>
       </div>
 
       <div className="box">
-        <div className="tabs">
-          <ul>
-            <li className="is-active">
-              <NavLink exact to={clusterTopicPath(clusterId, topicName)}>Overview</NavLink>
-            </li>
-            <li>
-              <NavLink exact to={clusterTopicMessagesPath(clusterId, topicName)}>Messages</NavLink>
-            </li>
-            <li>
-              <NavLink exact to={clusterTopicSettingsPath(clusterId, topicName)}>Settings</NavLink>
-            </li>
-          </ul>
-        </div>
-
+        <nav className="navbar" role="navigation">
+          <NavLink
+            exact
+            to={clusterTopicPath(clusterId, topicName)}
+            className="navbar-item is-tab"
+            activeClassName="is-active is-primary"
+          >
+            Overview
+          </NavLink>
+          <NavLink
+            exact
+            to={clusterTopicMessagesPath(clusterId, topicName)}
+            className="navbar-item is-tab"
+            activeClassName="is-active"
+          >
+            Messages
+          </NavLink>
+          <NavLink
+            exact
+            to={clusterTopicSettingsPath(clusterId, topicName)}
+            className="navbar-item is-tab"
+            activeClassName="is-active"
+          >
+            Settings
+          </NavLink>
+        </nav>
+        <br />
         <Switch>
           <Route exact path="/clusters/:clusterId/topics/:topicName/messages" component={MessagesContainer} />
           <Route exact path="/clusters/:clusterId/topics/:topicName/settings" component={SettingsContainer} />
diff --git a/frontend/src/components/Topics/Details/Overview/Overview.tsx b/frontend/src/components/Topics/Details/Overview/Overview.tsx
index 05ac02c92e..d330860268 100644
--- a/frontend/src/components/Topics/Details/Overview/Overview.tsx
+++ b/frontend/src/components/Topics/Details/Overview/Overview.tsx
@@ -19,6 +19,7 @@ const Overview: React.FC<Props> = ({
   inSyncReplicas,
   replicas,
   partitionCount,
+  internal,
   replicationFactor,
   fetchTopicDetails,
 }) => {
@@ -34,19 +35,24 @@ const Overview: React.FC<Props> = ({
   return (
     <>
       <MetricsWrapper wrapperClassName="notification">
-        <Indicator title="Partitions">
+        <Indicator label="Partitions">
           {partitionCount}
         </Indicator>
-        <Indicator title="Replication Factor">
+        <Indicator label="Replication Factor">
           {replicationFactor}
         </Indicator>
-        <Indicator title="Under replicated partitions">
+        <Indicator label="URP" title="Under replicated partitions">
           {underReplicatedPartitions}
         </Indicator>
-        <Indicator title="In sync replicas">
+        <Indicator label="In sync replicas">
           {inSyncReplicas}
           <span className="subtitle has-text-weight-light"> of {replicas}</span>
         </Indicator>
+        <Indicator label="Type">
+          <div className="tag is-primary">
+            {internal ? 'Internal' : 'External'}
+          </div>
+        </Indicator>
       </MetricsWrapper>
 
       <table className="table is-striped is-fullwidth">
diff --git a/frontend/src/components/common/Dashboard/Indicator.tsx b/frontend/src/components/common/Dashboard/Indicator.tsx
index f1b136da14..0a364a5ddb 100644
--- a/frontend/src/components/common/Dashboard/Indicator.tsx
+++ b/frontend/src/components/common/Dashboard/Indicator.tsx
@@ -1,17 +1,19 @@
 import React from 'react';
 
 interface Props {
-  title: string;
+  label: string;
+  title?: string;
 }
 
 const Indicator: React.FC<Props> = ({
+  label,
   title,
   children,
 }) => {
   return (
     <div className="level-item level-left">
-      <div>
-        <p className="heading">{title}</p>
+      <div title={title ? title : label}>
+        <p className="heading">{label}</p>
         <p className="title">{children}</p>
       </div>
     </div>