Feature/layout redesign (#862)

* Refactor pages general layout

* Refactor breadcrumbs

* Refactor brokers metrics

* Fix toggle position

Co-authored-by: azat.belgibayev <azat.belgibayev@almatech.dev>

kafka-ui-react-app/src/components/App.scss

@@ -1,47 +1,45 @@
-$header-height: 52px;
 $navbar-width: 250px;
+$navbar-height: 3.25rem;
 
 .Layout {
   min-width: 1200px;
 
   &__header {
-    box-shadow: 0 0.46875rem 2.1875rem rgba(4,9,20,0.03),
-      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);
+    border-bottom: 1px solid #e7e7e7;
     z-index: 31;
   }
 
   &__container {
-    margin-top: $header-height;
+    margin-top: $navbar-height;
     margin-left: $navbar-width;
     position: relative;
     z-index: 20;
   }
 
-  &__sidebar{
+  &__sidebar {
     width: $navbar-width;
     display: flex;
     flex-direction: column;
-    box-shadow: 7px 0 60px rgba(0,0,0,0.05);
+    border-right: 1px solid #e7e7e7;
     position: fixed;
-    top: $header-height;
+    top: $navbar-height;
     left: 0;
     bottom: 0;
     padding: 20px 20px;
     overflow-y: scroll;
-    transition: width .25s,opacity .25s,transform .25s,-webkit-transform .25s;
+    transition: width 0.25s, opacity 0.25s, transform 0.25s,
+      -webkit-transform 0.25s;
 
     &Overlay {
       position: fixed;
       top: 0;
-      height: 120vh;
+      height: calc(100vh - #{$navbar-height});
       z-index: 99;
       display: block;
       visibility: hidden;
       opacity: 0;
-      -webkit-transition: all .5s ease;
-      transition: all .5s ease;
+      -webkit-transition: all 0.5s ease;
+      transition: all 0.5s ease;
     }
   }
 
@@ -69,7 +67,7 @@ $navbar-width: 250px;
 
     &__container {
       margin-left: initial;
-      margin-top: 1.5rem;
+      margin-top: 3.5rem;
     }
 
     &__sidebar {
@@ -83,10 +81,10 @@ $navbar-width: 250px;
 
     &--sidebarVisible {
       .Layout__sidebar {
-        transform: translate3d($navbar-width,0,0);
+        transform: translate3d($navbar-width, 0, 0);
 
         &Overlay {
-          background-color: rgba(34,41,47,.5);
+          background-color: rgba(34, 41, 47, 0.5);
           left: 0;
           right: 0;
           opacity: 1;
@@ -95,4 +93,27 @@ $navbar-width: 250px;
       }
     }
   }
+
+  .metrics-box {
+    flex-direction: column;
+  }
+}
+
+.metrics-box {
+  padding: 1.5rem 1rem;
+  background: #f1f2f3;
+
+  display: flex;
+  gap: 1rem;
+  .box {
+    padding: 0;
+    filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.1));
+
+    .level-item {
+      padding: 1rem;
+      &:not(:last-of-type) {
+        border-right: 1px solid #f1f2f3;
+      }
+    }
+  }
 }

kafka-ui-react-app/src/components/App.tsx

@@ -10,7 +10,9 @@ import Dashboard from 'components/Dashboard/Dashboard';
 import ClusterPage from 'components/Cluster/Cluster';
 import Version from 'components/Version/Version';
 import Alert from 'components/Alert/Alert';
+
 import 'components/App.scss';
+import Breadcrumb from './common/Breadcrumb/Breadcrumb';
 
 export interface AppProps {
   isClusterListFetched?: boolean;
@@ -93,14 +95,17 @@ const App: React.FC<AppProps> = ({
           aria-hidden="true"
         />
         {isClusterListFetched ? (
-          <Switch>
-            <Route
-              exact
-              path={['/', '/ui', '/ui/clusters']}
-              component={Dashboard}
-            />
-            <Route path="/ui/clusters/:clusterName" component={ClusterPage} />
-          </Switch>
+          <>
+            <Breadcrumb />
+            <Switch>
+              <Route
+                exact
+                path={['/', '/ui', '/ui/clusters']}
+                component={Dashboard}
+              />
+              <Route path="/ui/clusters/:clusterName" component={ClusterPage} />
+            </Switch>
+          </>
         ) : (
           <PageLoader fullHeight />
         )}

kafka-ui-react-app/src/components/Brokers/Brokers.tsx

@@ -5,7 +5,6 @@ import useInterval from 'lib/hooks/useInterval';
 import cx from 'classnames';
 import MetricsWrapper from 'components/common/Dashboard/MetricsWrapper';
 import Indicator from 'components/common/Dashboard/Indicator';
-import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
 import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
 import { useParams } from 'react-router';
 
@@ -44,59 +43,63 @@ const Brokers: React.FC<Props> = ({
 
   return (
     <div className="section">
-      <Breadcrumb>Brokers overview</Breadcrumb>
-      <MetricsWrapper title="Uptime">
-        <Indicator className="is-one-third" label="Total Brokers">
-          {brokerCount}
-        </Indicator>
-        <Indicator className="is-one-third" label="Active Controllers">
-          {activeControllers}
-        </Indicator>
-        <Indicator className="is-one-third" label="Zookeeper Status">
-          <span className={cx('tag', zkOnline ? 'is-success' : 'is-danger')}>
-            {zkOnline ? 'Online' : 'Offline'}
-          </span>
-        </Indicator>
-        <Indicator className="is-one-third" label="Version">
-          {version}
-        </Indicator>
-      </MetricsWrapper>
-      <MetricsWrapper title="Partitions">
-        <Indicator label="Online">
-          <span
-            className={cx({ 'has-text-danger': offlinePartitionCount !== 0 })}
-          >
-            {onlinePartitionCount}
-          </span>
-          <span className="subtitle has-text-weight-light">
-            {' '}
-            of
-            {(onlinePartitionCount || 0) + (offlinePartitionCount || 0)}
-          </span>
-        </Indicator>
-        <Indicator label="URP" title="Under replicated partitions">
-          {underReplicatedPartitionCount}
-        </Indicator>
-        <Indicator label="In Sync Replicas">{inSyncReplicasCount}</Indicator>
-        <Indicator label="Out of Sync Replicas">
-          {outOfSyncReplicasCount}
-        </Indicator>
-      </MetricsWrapper>
-      <MetricsWrapper multiline title="Disk Usage">
-        {diskUsage?.map((brokerDiskUsage) => (
-          <React.Fragment key={brokerDiskUsage.brokerId}>
-            <Indicator className="is-one-third" label="Broker">
-              {brokerDiskUsage.brokerId}
-            </Indicator>
-            <Indicator className="is-one-third" label="Segment Size" title="">
-              <BytesFormatted value={brokerDiskUsage.segmentSize} />
-            </Indicator>
-            <Indicator className="is-one-third" label="Segment count">
-              {brokerDiskUsage.segmentCount}
-            </Indicator>
-          </React.Fragment>
-        ))}
-      </MetricsWrapper>
+      <div className="metrics-box mb-2">
+        <MetricsWrapper title="Uptime" wrapperClassName="is-flex-grow-1">
+          <Indicator className="is-one-third" label="Total Brokers">
+            {brokerCount}
+          </Indicator>
+          <Indicator className="is-one-third" label="Active Controllers">
+            {activeControllers}
+          </Indicator>
+          <Indicator className="is-one-third" label="Zookeeper Status">
+            <span className={cx('tag', zkOnline ? 'is-success' : 'is-danger')}>
+              {zkOnline ? 'Online' : 'Offline'}
+            </span>
+          </Indicator>
+          <Indicator className="is-one-third" label="Version">
+            {version}
+          </Indicator>
+        </MetricsWrapper>
+        <MetricsWrapper title="Partitions" wrapperClassName="is-flex-grow-1">
+          <Indicator label="Online">
+            <span
+              className={cx({ 'has-text-danger': offlinePartitionCount !== 0 })}
+            >
+              {onlinePartitionCount}
+            </span>
+            <span className="has-text-weight-light">
+              {' '}
+              of {(onlinePartitionCount || 0) + (offlinePartitionCount || 0)}
+            </span>
+          </Indicator>
+          <Indicator label="URP" title="Under replicated partitions">
+            {underReplicatedPartitionCount}
+          </Indicator>
+          <Indicator label="In Sync Replicas">{inSyncReplicasCount}</Indicator>
+          <Indicator label="Out of Sync Replicas">
+            {outOfSyncReplicasCount}
+          </Indicator>
+        </MetricsWrapper>
+        <MetricsWrapper
+          multiline
+          title="Disk Usage"
+          wrapperClassName="is-flex-grow-1"
+        >
+          {diskUsage?.map((brokerDiskUsage) => (
+            <React.Fragment key={brokerDiskUsage.brokerId}>
+              <Indicator className="is-one-third" label="Broker">
+                {brokerDiskUsage.brokerId}
+              </Indicator>
+              <Indicator className="is-one-third" label="Segment Size" title="">
+                <BytesFormatted value={brokerDiskUsage.segmentSize} />
+              </Indicator>
+              <Indicator className="is-one-third" label="Segment count">
+                {brokerDiskUsage.segmentCount}
+              </Indicator>
+            </React.Fragment>
+          ))}
+        </MetricsWrapper>
+      </div>
     </div>
   );
 };

kafka-ui-react-app/src/components/Brokers/__test__/__snapshots__/Brokers.spec.tsx.snap

@@ -75,271 +75,258 @@ exports[`Brokers Component Brokers Empty matches Brokers Empty snapshot 1`] = `
       <div
         className="section"
       >
-        <Breadcrumb>
-          <nav
-            aria-label="breadcrumbs"
-            className="breadcrumb"
-          >
-            <ul>
-              <li
-                className="is-active"
-              >
-                <span
-                  className=""
-                >
-                  Brokers overview
-                </span>
-              </li>
-            </ul>
-          </nav>
-        </Breadcrumb>
-        <MetricsWrapper
-          title="Uptime"
+        <div
+          className="metrics-box mb-2"
         >
-          <div
-            className="box"
+          <MetricsWrapper
+            title="Uptime"
+            wrapperClassName="is-flex-grow-1"
           >
-            <h5
-              className="subtitle is-6"
-            >
-              Uptime
-            </h5>
             <div
-              className="level"
+              className="is-flex-grow-1"
             >
-              <Indicator
-                className="is-one-third"
-                label="Total Brokers"
+              <h5
+                className="is-7 has-text-weight-medium mb-2"
               >
-                <div
-                  className="level-item is-one-third"
-                >
-                  <div
-                    title="Total Brokers"
-                  >
-                    <p
-                      className="heading"
-                    >
-                      Total Brokers
-                    </p>
-                    <p
-                      className="title has-text-centered"
-                    >
-                      0
-                    </p>
-                  </div>
-                </div>
-              </Indicator>
-              <Indicator
-                className="is-one-third"
-                label="Active Controllers"
+                Uptime
+              </h5>
+              <div
+                className="box"
               >
                 <div
-                  className="level-item is-one-third"
+                  className="level"
                 >
-                  <div
-                    title="Active Controllers"
+                  <Indicator
+                    className="is-one-third"
+                    label="Total Brokers"
                   >
-                    <p
-                      className="heading"
-                    >
-                      Active Controllers
-                    </p>
-                    <p
-                      className="title has-text-centered"
-                    >
-                      0
-                    </p>
-                  </div>
-                </div>
-              </Indicator>
-              <Indicator
-                className="is-one-third"
-                label="Zookeeper Status"
-              >
-                <div
-                  className="level-item is-one-third"
-                >
-                  <div
-                    title="Zookeeper Status"
+                    <div
+                      className="level-item is-one-third"
+                    >
+                      <div>
+                        <p
+                          className="is-size-8"
+                        >
+                          Total Brokers
+                        </p>
+                        <p
+                          className="is-size-6 has-text-weight-medium"
+                        >
+                          0
+                        </p>
+                      </div>
+                    </div>
+                  </Indicator>
+                  <Indicator
+                    className="is-one-third"
+                    label="Active Controllers"
                   >
-                    <p
-                      className="heading"
-                    >
-                      Zookeeper Status
-                    </p>
-                    <p
-                      className="title has-text-centered"
-                    >
-                      <span
-                        className="tag is-danger"
-                      >
-                        Offline
-                      </span>
-                    </p>
-                  </div>
-                </div>
-              </Indicator>
-              <Indicator
-                className="is-one-third"
-                label="Version"
-              >
-                <div
-                  className="level-item is-one-third"
-                >
-                  <div
-                    title="Version"
+                    <div
+                      className="level-item is-one-third"
+                    >
+                      <div>
+                        <p
+                          className="is-size-8"
+                        >
+                          Active Controllers
+                        </p>
+                        <p
+                          className="is-size-6 has-text-weight-medium"
+                        >
+                          0
+                        </p>
+                      </div>
+                    </div>
+                  </Indicator>
+                  <Indicator
+                    className="is-one-third"
+                    label="Zookeeper Status"
                   >
-                    <p
-                      className="heading"
-                    >
-                      Version
-                    </p>
-                    <p
-                      className="title has-text-centered"
-                    >
-                      1
-                    </p>
-                  </div>
+                    <div
+                      className="level-item is-one-third"
+                    >
+                      <div>
+                        <p
+                          className="is-size-8"
+                        >
+                          Zookeeper Status
+                        </p>
+                        <p
+                          className="is-size-6 has-text-weight-medium"
+                        >
+                          <span
+                            className="tag is-danger"
+                          >
+                            Offline
+                          </span>
+                        </p>
+                      </div>
+                    </div>
+                  </Indicator>
+                  <Indicator
+                    className="is-one-third"
+                    label="Version"
+                  >
+                    <div
+                      className="level-item is-one-third"
+                    >
+                      <div>
+                        <p
+                          className="is-size-8"
+                        >
+                          Version
+                        </p>
+                        <p
+                          className="is-size-6 has-text-weight-medium"
+                        >
+                          1
+                        </p>
+                      </div>
+                    </div>
+                  </Indicator>
                 </div>
-              </Indicator>
+              </div>
             </div>
-          </div>
-        </MetricsWrapper>
-        <MetricsWrapper
-          title="Partitions"
-        >
-          <div
-            className="box"
+          </MetricsWrapper>
+          <MetricsWrapper
+            title="Partitions"
+            wrapperClassName="is-flex-grow-1"
           >
-            <h5
-              className="subtitle is-6"
-            >
-              Partitions
-            </h5>
             <div
-              className="level"
+              className="is-flex-grow-1"
             >
-              <Indicator
-                label="Online"
+              <h5
+                className="is-7 has-text-weight-medium mb-2"
               >
-                <div
-                  className="level-item"
-                >
-                  <div
-                    title="Online"
-                  >
-                    <p
-                      className="heading"
-                    >
-                      Online
-                    </p>
-                    <p
-                      className="title has-text-centered"
-                    >
-                      <span
-                        className=""
-                      >
-                        0
-                      </span>
-                      <span
-                        className="subtitle has-text-weight-light"
-                      >
-                         
-                        of
-                        0
-                      </span>
-                    </p>
-                  </div>
-                </div>
-              </Indicator>
-              <Indicator
-                label="URP"
-                title="Under replicated partitions"
+                Partitions
+              </h5>
+              <div
+                className="box"
               >
                 <div
-                  className="level-item"
+                  className="level"
                 >
-                  <div
+                  <Indicator
+                    label="Online"
+                  >
+                    <div
+                      className="level-item"
+                    >
+                      <div>
+                        <p
+                          className="is-size-8"
+                        >
+                          Online
+                        </p>
+                        <p
+                          className="is-size-6 has-text-weight-medium"
+                        >
+                          <span
+                            className=""
+                          >
+                            0
+                          </span>
+                          <span
+                            className="has-text-weight-light"
+                          >
+                             
+                            of 
+                            0
+                          </span>
+                        </p>
+                      </div>
+                    </div>
+                  </Indicator>
+                  <Indicator
+                    label="URP"
                     title="Under replicated partitions"
                   >
-                    <p
-                      className="heading"
-                    >
-                      URP
-                    </p>
-                    <p
-                      className="title has-text-centered"
+                    <div
+                      className="level-item"
                     >
-                      0
-                    </p>
-                  </div>
-                </div>
-              </Indicator>
-              <Indicator
-                label="In Sync Replicas"
-              >
-                <div
-                  className="level-item"
-                >
-                  <div
-                    title="In Sync Replicas"
+                      <div
+                        title="Under replicated partitions"
+                      >
+                        <p
+                          className="is-size-8"
+                        >
+                          URP
+                        </p>
+                        <p
+                          className="is-size-6 has-text-weight-medium"
+                        >
+                          0
+                        </p>
+                      </div>
+                    </div>
+                  </Indicator>
+                  <Indicator
+                    label="In Sync Replicas"
                   >
-                    <p
-                      className="heading"
-                    >
-                      In Sync Replicas
-                    </p>
-                    <p
-                      className="title has-text-centered"
-                    >
-                      0
-                    </p>
-                  </div>
-                </div>
-              </Indicator>
-              <Indicator
-                label="Out of Sync Replicas"
-              >
-                <div
-                  className="level-item"
-                >
-                  <div
-                    title="Out of Sync Replicas"
+                    <div
+                      className="level-item"
+                    >
+                      <div>
+                        <p
+                          className="is-size-8"
+                        >
+                          In Sync Replicas
+                        </p>
+                        <p
+                          className="is-size-6 has-text-weight-medium"
+                        >
+                          0
+                        </p>
+                      </div>
+                    </div>
+                  </Indicator>
+                  <Indicator
+                    label="Out of Sync Replicas"
                   >
-                    <p
-                      className="heading"
-                    >
-                      Out of Sync Replicas
-                    </p>
-                    <p
-                      className="title has-text-centered"
-                    >
-                      0
-                    </p>
-                  </div>
+                    <div
+                      className="level-item"
+                    >
+                      <div>
+                        <p
+                          className="is-size-8"
+                        >
+                          Out of Sync Replicas
+                        </p>
+                        <p
+                          className="is-size-6 has-text-weight-medium"
+                        >
+                          0
+                        </p>
+                      </div>
+                    </div>
+                  </Indicator>
                 </div>
-              </Indicator>
+              </div>
             </div>
-          </div>
-        </MetricsWrapper>
-        <MetricsWrapper
-          multiline={true}
-          title="Disk Usage"
-        >
-          <div
-            className="box"
+          </MetricsWrapper>
+          <MetricsWrapper
+            multiline={true}
+            title="Disk Usage"
+            wrapperClassName="is-flex-grow-1"
           >
-            <h5
-              className="subtitle is-6"
-            >
-              Disk Usage
-            </h5>
             <div
-              className="level level-multiline"
-            />
-          </div>
-        </MetricsWrapper>
+              className="is-flex-grow-1"
+            >
+              <h5
+                className="is-7 has-text-weight-medium mb-2"
+              >
+                Disk Usage
+              </h5>
+              <div
+                className="box"
+              >
+                <div
+                  className="level level-multiline"
+                />
+              </div>
+            </div>
+          </MetricsWrapper>
+        </div>
       </div>
     </Brokers>
   </Router>
@@ -430,348 +417,331 @@ exports[`Brokers Component Brokers matches snapshot 1`] = `
       <div
         className="section"
       >
-        <Breadcrumb>
-          <nav
-            aria-label="breadcrumbs"
-            className="breadcrumb"
-          >
-            <ul>
-              <li
-                className="is-active"
-              >
-                <span
-                  className=""
-                >
-                  Brokers overview
-                </span>
-              </li>
-            </ul>
-          </nav>
-        </Breadcrumb>
-        <MetricsWrapper
-          title="Uptime"
+        <div
+          className="metrics-box mb-2"
         >
-          <div
-            className="box"
+          <MetricsWrapper
+            title="Uptime"
+            wrapperClassName="is-flex-grow-1"
           >
-            <h5
-              className="subtitle is-6"
-            >
-              Uptime
-            </h5>
             <div
-              className="level"
+              className="is-flex-grow-1"
             >
-              <Indicator
-                className="is-one-third"
-                label="Total Brokers"
+              <h5
+                className="is-7 has-text-weight-medium mb-2"
               >
-                <div
-                  className="level-item is-one-third"
-                >
-                  <div
-                    title="Total Brokers"
-                  >
-                    <p
-                      className="heading"
-                    >
-                      Total Brokers
-                    </p>
-                    <p
-                      className="title has-text-centered"
-                    >
-                      1
-                    </p>
-                  </div>
-                </div>
-              </Indicator>
-              <Indicator
-                className="is-one-third"
-                label="Active Controllers"
+                Uptime
+              </h5>
+              <div
+                className="box"
               >
                 <div
-                  className="level-item is-one-third"
+                  className="level"
                 >
-                  <div
-                    title="Active Controllers"
+                  <Indicator
+                    className="is-one-third"
+                    label="Total Brokers"
                   >
-                    <p
-                      className="heading"
-                    >
-                      Active Controllers
-                    </p>
-                    <p
-                      className="title has-text-centered"
-                    >
-                      1
-                    </p>
-                  </div>
-                </div>
-              </Indicator>
-              <Indicator
-                className="is-one-third"
-                label="Zookeeper Status"
-              >
-                <div
-                  className="level-item is-one-third"
-                >
-                  <div
-                    title="Zookeeper Status"
+                    <div
+                      className="level-item is-one-third"
+                    >
+                      <div>
+                        <p
+                          className="is-size-8"
+                        >
+                          Total Brokers
+                        </p>
+                        <p
+                          className="is-size-6 has-text-weight-medium"
+                        >
+                          1
+                        </p>
+                      </div>
+                    </div>
+                  </Indicator>
+                  <Indicator
+                    className="is-one-third"
+                    label="Active Controllers"
                   >
-                    <p
-                      className="heading"
-                    >
-                      Zookeeper Status
-                    </p>
-                    <p
-                      className="title has-text-centered"
-                    >
-                      <span
-                        className="tag is-success"
-                      >
-                        Online
-                      </span>
-                    </p>
-                  </div>
-                </div>
-              </Indicator>
-              <Indicator
-                className="is-one-third"
-                label="Version"
-              >
-                <div
-                  className="level-item is-one-third"
-                >
-                  <div
-                    title="Version"
+                    <div
+                      className="level-item is-one-third"
+                    >
+                      <div>
+                        <p
+                          className="is-size-8"
+                        >
+                          Active Controllers
+                        </p>
+                        <p
+                          className="is-size-6 has-text-weight-medium"
+                        >
+                          1
+                        </p>
+                      </div>
+                    </div>
+                  </Indicator>
+                  <Indicator
+                    className="is-one-third"
+                    label="Zookeeper Status"
                   >
-                    <p
-                      className="heading"
-                    >
-                      Version
-                    </p>
-                    <p
-                      className="title has-text-centered"
-                    >
-                      1
-                    </p>
-                  </div>
+                    <div
+                      className="level-item is-one-third"
+                    >
+                      <div>
+                        <p
+                          className="is-size-8"
+                        >
+                          Zookeeper Status
+                        </p>
+                        <p
+                          className="is-size-6 has-text-weight-medium"
+                        >
+                          <span
+                            className="tag is-success"
+                          >
+                            Online
+                          </span>
+                        </p>
+                      </div>
+                    </div>
+                  </Indicator>
+                  <Indicator
+                    className="is-one-third"
+                    label="Version"
+                  >
+                    <div
+                      className="level-item is-one-third"
+                    >
+                      <div>
+                        <p
+                          className="is-size-8"
+                        >
+                          Version
+                        </p>
+                        <p
+                          className="is-size-6 has-text-weight-medium"
+                        >
+                          1
+                        </p>
+                      </div>
+                    </div>
+                  </Indicator>
                 </div>
-              </Indicator>
+              </div>
             </div>
-          </div>
-        </MetricsWrapper>
-        <MetricsWrapper
-          title="Partitions"
-        >
-          <div
-            className="box"
+          </MetricsWrapper>
+          <MetricsWrapper
+            title="Partitions"
+            wrapperClassName="is-flex-grow-1"
           >
-            <h5
-              className="subtitle is-6"
-            >
-              Partitions
-            </h5>
             <div
-              className="level"
+              className="is-flex-grow-1"
             >
-              <Indicator
-                label="Online"
+              <h5
+                className="is-7 has-text-weight-medium mb-2"
               >
-                <div
-                  className="level-item"
-                >
-                  <div
-                    title="Online"
-                  >
-                    <p
-                      className="heading"
-                    >
-                      Online
-                    </p>
-                    <p
-                      className="title has-text-centered"
-                    >
-                      <span
-                        className=""
-                      >
-                        64
-                      </span>
-                      <span
-                        className="subtitle has-text-weight-light"
-                      >
-                         
-                        of
-                        64
-                      </span>
-                    </p>
-                  </div>
-                </div>
-              </Indicator>
-              <Indicator
-                label="URP"
-                title="Under replicated partitions"
+                Partitions
+              </h5>
+              <div
+                className="box"
               >
                 <div
-                  className="level-item"
+                  className="level"
                 >
-                  <div
+                  <Indicator
+                    label="Online"
+                  >
+                    <div
+                      className="level-item"
+                    >
+                      <div>
+                        <p
+                          className="is-size-8"
+                        >
+                          Online
+                        </p>
+                        <p
+                          className="is-size-6 has-text-weight-medium"
+                        >
+                          <span
+                            className=""
+                          >
+                            64
+                          </span>
+                          <span
+                            className="has-text-weight-light"
+                          >
+                             
+                            of 
+                            64
+                          </span>
+                        </p>
+                      </div>
+                    </div>
+                  </Indicator>
+                  <Indicator
+                    label="URP"
                     title="Under replicated partitions"
                   >
-                    <p
-                      className="heading"
-                    >
-                      URP
-                    </p>
-                    <p
-                      className="title has-text-centered"
+                    <div
+                      className="level-item"
                     >
-                      0
-                    </p>
-                  </div>
-                </div>
-              </Indicator>
-              <Indicator
-                label="In Sync Replicas"
-              >
-                <div
-                  className="level-item"
-                >
-                  <div
-                    title="In Sync Replicas"
+                      <div
+                        title="Under replicated partitions"
+                      >
+                        <p
+                          className="is-size-8"
+                        >
+                          URP
+                        </p>
+                        <p
+                          className="is-size-6 has-text-weight-medium"
+                        >
+                          0
+                        </p>
+                      </div>
+                    </div>
+                  </Indicator>
+                  <Indicator
+                    label="In Sync Replicas"
                   >
-                    <p
-                      className="heading"
-                    >
-                      In Sync Replicas
-                    </p>
-                    <p
-                      className="title has-text-centered"
-                    >
-                      64
-                    </p>
-                  </div>
-                </div>
-              </Indicator>
-              <Indicator
-                label="Out of Sync Replicas"
-              >
-                <div
-                  className="level-item"
-                >
-                  <div
-                    title="Out of Sync Replicas"
+                    <div
+                      className="level-item"
+                    >
+                      <div>
+                        <p
+                          className="is-size-8"
+                        >
+                          In Sync Replicas
+                        </p>
+                        <p
+                          className="is-size-6 has-text-weight-medium"
+                        >
+                          64
+                        </p>
+                      </div>
+                    </div>
+                  </Indicator>
+                  <Indicator
+                    label="Out of Sync Replicas"
                   >
-                    <p
-                      className="heading"
-                    >
-                      Out of Sync Replicas
-                    </p>
-                    <p
-                      className="title has-text-centered"
-                    >
-                      0
-                    </p>
-                  </div>
+                    <div
+                      className="level-item"
+                    >
+                      <div>
+                        <p
+                          className="is-size-8"
+                        >
+                          Out of Sync Replicas
+                        </p>
+                        <p
+                          className="is-size-6 has-text-weight-medium"
+                        >
+                          0
+                        </p>
+                      </div>
+                    </div>
+                  </Indicator>
                 </div>
-              </Indicator>
+              </div>
             </div>
-          </div>
-        </MetricsWrapper>
-        <MetricsWrapper
-          multiline={true}
-          title="Disk Usage"
-        >
-          <div
-            className="box"
+          </MetricsWrapper>
+          <MetricsWrapper
+            multiline={true}
+            title="Disk Usage"
+            wrapperClassName="is-flex-grow-1"
           >
-            <h5
-              className="subtitle is-6"
-            >
-              Disk Usage
-            </h5>
             <div
-              className="level level-multiline"
+              className="is-flex-grow-1"
             >
-              <Indicator
-                className="is-one-third"
-                label="Broker"
+              <h5
+                className="is-7 has-text-weight-medium mb-2"
               >
-                <div
-                  className="level-item is-one-third"
-                >
-                  <div
-                    title="Broker"
-                  >
-                    <p
-                      className="heading"
-                    >
-                      Broker
-                    </p>
-                    <p
-                      className="title has-text-centered"
-                    >
-                      1
-                    </p>
-                  </div>
-                </div>
-              </Indicator>
-              <Indicator
-                className="is-one-third"
-                label="Segment Size"
-                title=""
+                Disk Usage
+              </h5>
+              <div
+                className="box"
               >
                 <div
-                  className="level-item is-one-third"
+                  className="level level-multiline"
                 >
-                  <div
-                    title="Segment Size"
+                  <Indicator
+                    className="is-one-third"
+                    label="Broker"
                   >
-                    <p
-                      className="heading"
-                    >
-                      Segment Size
-                    </p>
-                    <p
-                      className="title has-text-centered"
+                    <div
+                      className="level-item is-one-third"
+                    >
+                      <div>
+                        <p
+                          className="is-size-8"
+                        >
+                          Broker
+                        </p>
+                        <p
+                          className="is-size-6 has-text-weight-medium"
+                        >
+                          1
+                        </p>
+                      </div>
+                    </div>
+                  </Indicator>
+                  <Indicator
+                    className="is-one-third"
+                    label="Segment Size"
+                    title=""
+                  >
+                    <div
+                      className="level-item is-one-third"
                     >
-                      <BytesFormatted
-                        value={60718}
+                      <div
+                        title=""
                       >
-                        <span>
-                          59KB
-                        </span>
-                      </BytesFormatted>
-                    </p>
-                  </div>
-                </div>
-              </Indicator>
-              <Indicator
-                className="is-one-third"
-                label="Segment count"
-              >
-                <div
-                  className="level-item is-one-third"
-                >
-                  <div
-                    title="Segment count"
+                        <p
+                          className="is-size-8"
+                        >
+                          Segment Size
+                        </p>
+                        <p
+                          className="is-size-6 has-text-weight-medium"
+                        >
+                          <BytesFormatted
+                            value={60718}
+                          >
+                            <span>
+                              59KB
+                            </span>
+                          </BytesFormatted>
+                        </p>
+                      </div>
+                    </div>
+                  </Indicator>
+                  <Indicator
+                    className="is-one-third"
+                    label="Segment count"
                   >
-                    <p
-                      className="heading"
-                    >
-                      Segment count
-                    </p>
-                    <p
-                      className="title has-text-centered"
-                    >
-                      64
-                    </p>
-                  </div>
+                    <div
+                      className="level-item is-one-third"
+                    >
+                      <div>
+                        <p
+                          className="is-size-8"
+                        >
+                          Segment count
+                        </p>
+                        <p
+                          className="is-size-6 has-text-weight-medium"
+                        >
+                          64
+                        </p>
+                      </div>
+                    </div>
+                  </Indicator>
                 </div>
-              </Indicator>
+              </div>
             </div>
-          </div>
-        </MetricsWrapper>
+          </MetricsWrapper>
+        </div>
       </div>
     </Brokers>
   </Router>

kafka-ui-react-app/src/components/Connect/Breadcrumbs/Breadcrumbs.tsx

@@ -1,71 +0,0 @@
-import React from 'react';
-import { Route, Switch, useParams } from 'react-router-dom';
-import { ClusterName, ConnectName, ConnectorName } from 'redux/interfaces';
-import {
-  clusterConnectorsPath,
-  clusterConnectorNewPath,
-  clusterConnectConnectorPath,
-  clusterConnectConnectorEditPath,
-} from 'lib/paths';
-import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
-
-interface RouterParams {
-  clusterName: ClusterName;
-  connectName: ConnectName;
-  connectorName: ConnectorName;
-}
-
-const Breadcrumbs: React.FC = () => {
-  const { clusterName, connectName, connectorName } = useParams<RouterParams>();
-
-  const rootLinks = [
-    {
-      href: clusterConnectorsPath(clusterName),
-      label: 'All Connectors',
-    },
-  ];
-
-  const connectorLinks = [
-    ...rootLinks,
-    {
-      href: clusterConnectConnectorPath(
-        clusterName,
-        connectName,
-        connectorName
-      ),
-      label: connectorName,
-    },
-  ];
-
-  return (
-    <Switch>
-      <Route exact path={clusterConnectorsPath(':clusterName')}>
-        <Breadcrumb>All Connectors</Breadcrumb>
-      </Route>
-      <Route exact path={clusterConnectorNewPath(':clusterName')}>
-        <Breadcrumb links={rootLinks}>New Connector</Breadcrumb>
-      </Route>
-      <Route
-        exact
-        path={clusterConnectConnectorEditPath(
-          ':clusterName',
-          ':connectName',
-          ':connectorName'
-        )}
-      >
-        <Breadcrumb links={connectorLinks}>Edit</Breadcrumb>
-      </Route>
-      <Route
-        path={clusterConnectConnectorPath(
-          ':clusterName',
-          ':connectName',
-          ':connectorName'
-        )}
-      >
-        <Breadcrumb links={rootLinks}>{connectorName}</Breadcrumb>
-      </Route>
-    </Switch>
-  );
-};
-
-export default Breadcrumbs;

kafka-ui-react-app/src/components/Connect/Breadcrumbs/__tests__/Breadcrumbs.spec.tsx

@@ -1,65 +0,0 @@
-import React from 'react';
-import { create } from 'react-test-renderer';
-import Breadcrumbs from 'components/Connect/Breadcrumbs/Breadcrumbs';
-import {
-  clusterConnectConnectorEditPath,
-  clusterConnectConnectorPath,
-  clusterConnectorNewPath,
-  clusterConnectorsPath,
-} from 'lib/paths';
-import { TestRouterWrapper } from 'lib/testHelpers';
-
-describe('Breadcrumbs', () => {
-  const setupWrapper = (pathname: string) => (
-    <TestRouterWrapper
-      pathname={pathname}
-      urlParams={{
-        clusterName: 'my-cluster',
-        connectName: 'my-connect',
-        connectorName: 'my-connector',
-      }}
-    >
-      <Breadcrumbs />
-    </TestRouterWrapper>
-  );
-
-  it('matches snapshot for root path', () => {
-    expect(
-      create(setupWrapper(clusterConnectorsPath(':clusterName'))).toJSON()
-    ).toMatchSnapshot();
-  });
-
-  it('matches snapshot for new connector path', () => {
-    expect(
-      create(setupWrapper(clusterConnectorNewPath(':clusterName'))).toJSON()
-    ).toMatchSnapshot();
-  });
-
-  it('matches snapshot for connector edit path', () => {
-    expect(
-      create(
-        setupWrapper(
-          clusterConnectConnectorEditPath(
-            ':clusterName',
-            ':connectName',
-            ':connectorName'
-          )
-        )
-      ).toJSON()
-    ).toMatchSnapshot();
-  });
-
-  it('matches snapshot for connector path', () => {
-    expect(
-      create(
-        setupWrapper(
-          clusterConnectConnectorPath(
-            ':clusterName',
-            ':connectName',
-            ':connectorName'
-          )
-        )
-      ).toJSON()
-    ).toMatchSnapshot();
-  });
-});

kafka-ui-react-app/src/components/Connect/Breadcrumbs/__tests__/__snapshots__/Breadcrumbs.spec.tsx.snap

@@ -1,109 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Breadcrumbs matches snapshot for connector edit path 1`] = `
-<nav
-  aria-label="breadcrumbs"
-  className="breadcrumb"
->
-  <ul>
-    <li>
-      <a
-        href="/ui/clusters/my-cluster/connectors"
-        onClick={[Function]}
-      >
-        All Connectors
-      </a>
-    </li>
-    <li>
-      <a
-        href="/ui/clusters/my-cluster/connects/my-connect/connectors/my-connector"
-        onClick={[Function]}
-      >
-        my-connector
-      </a>
-    </li>
-    <li
-      className="is-active"
-    >
-      <span
-        className=""
-      >
-        Edit
-      </span>
-    </li>
-  </ul>
-</nav>
-`;
-
-exports[`Breadcrumbs matches snapshot for connector path 1`] = `
-<nav
-  aria-label="breadcrumbs"
-  className="breadcrumb"
->
-  <ul>
-    <li>
-      <a
-        href="/ui/clusters/my-cluster/connectors"
-        onClick={[Function]}
-      >
-        All Connectors
-      </a>
-    </li>
-    <li
-      className="is-active"
-    >
-      <span
-        className=""
-      >
-        my-connector
-      </span>
-    </li>
-  </ul>
-</nav>
-`;
-
-exports[`Breadcrumbs matches snapshot for new connector path 1`] = `
-<nav
-  aria-label="breadcrumbs"
-  className="breadcrumb"
->
-  <ul>
-    <li>
-      <a
-        href="/ui/clusters/my-cluster/connectors"
-        onClick={[Function]}
-      >
-        All Connectors
-      </a>
-    </li>
-    <li
-      className="is-active"
-    >
-      <span
-        className=""
-      >
-        New Connector
-      </span>
-    </li>
-  </ul>
-</nav>
-`;
-
-exports[`Breadcrumbs matches snapshot for root path 1`] = `
-<nav
-  aria-label="breadcrumbs"
-  className="breadcrumb"
->
-  <ul>
-    <li
-      className="is-active"
-    >
-      <span
-        className=""
-      >
-        All Connectors
-      </span>
-    </li>
-  </ul>
-</nav>
-`;

kafka-ui-react-app/src/components/Connect/Connect.tsx

@@ -7,7 +7,6 @@ import {
   clusterConnectConnectorEditPath,
 } from 'lib/paths';
 
-import Breadcrumbs from './Breadcrumbs/Breadcrumbs';
 import ListContainer from './List/ListContainer';
 import NewContainer from './New/NewContainer';
 import DetailsContainer from './Details/DetailsContainer';
@@ -15,20 +14,6 @@ import EditContainer from './Edit/EditContainer';
 
 const Connect: React.FC = () => (
   <div className="section">
-    <Switch>
-      <Route
-        path={clusterConnectConnectorPath(
-          ':clusterName',
-          ':connectName',
-          ':connectorName'
-        )}
-        component={Breadcrumbs}
-      />
-      <Route
-        path={clusterConnectorsPath(':clusterName')}
-        component={Breadcrumbs}
-      />
-    </Switch>
     <Switch>
       <Route
         exact

kafka-ui-react-app/src/components/Connect/__tests__/__snapshots__/Connect.spec.tsx.snap

@@ -4,16 +4,6 @@ exports[`Connect matches snapshot 1`] = `
 <div
   className="section"
 >
-  <Switch>
-    <Route
-      component={[Function]}
-      path="/ui/clusters/:clusterName/connects/:connectName/connectors/:connectorName"
-    />
-    <Route
-      component={[Function]}
-      path="/ui/clusters/:clusterName/connectors"
-    />
-  </Switch>
   <Switch>
     <Route
       component={
@@ -30,7 +20,7 @@ exports[`Connect matches snapshot 1`] = `
     <Route
       component={[Function]}
       exact={true}
-      path="/ui/clusters/:clusterName/connectors/create_new"
+      path="/ui/clusters/:clusterName/connectors/create-new"
     />
     <Route
       component={[Function]}

kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { ClusterName } from 'redux/interfaces';
-import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
 import {
   clusterConsumerGroupResetOffsetsPath,
   clusterConsumerGroupsPath,
@@ -62,21 +61,6 @@ const Details: React.FC<Props> = ({
 
   return (
     <div className="section">
-      <div className="level">
-        <div className="level-item level-left">
-          <Breadcrumb
-            links={[
-              {
-                href: clusterConsumerGroupsPath(clusterName),
-                label: 'All Consumer Groups',
-              },
-            ]}
-          >
-            {groupId}
-          </Breadcrumb>
-        </div>
-      </div>
-
       {isFetched ? (
         <div className="box">
           <div className="level">

kafka-ui-react-app/src/components/ConsumerGroups/Details/ResetOffsets/ResetOffsets.tsx

@@ -1,12 +1,8 @@
-import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
 import {
   ConsumerGroupDetails,
   ConsumerGroupOffsetsResetType,
 } from 'generated-sources';
-import {
-  clusterConsumerGroupsPath,
-  clusterConsumerGroupDetailsPath,
-} from 'lib/paths';
+import { clusterConsumerGroupDetailsPath } from 'lib/paths';
 import React from 'react';
 import { Controller, useFieldArray, useForm } from 'react-hook-form';
 import { ClusterName, ConsumerGroupID } from 'redux/interfaces';
@@ -170,28 +166,6 @@ const ResetOffsets: React.FC<Props> = ({
 
   return (
     <div className="section">
-      <div className="level">
-        <div className="level-item level-left">
-          <Breadcrumb
-            links={[
-              {
-                href: clusterConsumerGroupsPath(clusterName),
-                label: 'All Consumer Groups',
-              },
-              {
-                href: clusterConsumerGroupDetailsPath(
-                  clusterName,
-                  consumerGroupID
-                ),
-                label: consumerGroupID,
-              },
-            ]}
-          >
-            Reset Offsets
-          </Breadcrumb>
-        </div>
-      </div>
-
       <div className="box">
         <form onSubmit={handleSubmit(onSubmit)}>
           <div className="columns">

kafka-ui-react-app/src/components/ConsumerGroups/Details/ResetOffsets/__test__/__snapshots__/ResetOffsets.spec.tsx.snap

@@ -6,44 +6,6 @@ exports[`ResetOffsets on initial render matches the snapshot 1`] = `
     <div
       class="section"
     >
-      <div
-        class="level"
-      >
-        <div
-          class="level-item level-left"
-        >
-          <nav
-            aria-label="breadcrumbs"
-            class="breadcrumb"
-          >
-            <ul>
-              <li>
-                <a
-                  href="/ui/clusters/testCluster/consumer-groups"
-                >
-                  All Consumer Groups
-                </a>
-              </li>
-              <li>
-                <a
-                  href="/ui/clusters/testCluster/consumer-groups/testGroup"
-                >
-                  testGroup
-                </a>
-              </li>
-              <li
-                class="is-active"
-              >
-                <span
-                  class=""
-                >
-                  Reset Offsets
-                </span>
-              </li>
-            </ul>
-          </nav>
-        </div>
-      </div>
       <div
         class="box"
       >

kafka-ui-react-app/src/components/ConsumerGroups/Details/__tests__/__snapshots__/Details.spec.tsx.snap

@@ -4,26 +4,6 @@ exports[`Details component when consumer gruops are NOT fetched Matches the snap
 <div
   className="section"
 >
-  <div
-    className="level"
-  >
-    <div
-      className="level-item level-left"
-    >
-      <Breadcrumb
-        links={
-          Array [
-            Object {
-              "href": "/ui/clusters/local/consumer-groups",
-              "label": "All Consumer Groups",
-            },
-          ]
-        }
-      >
-        test
-      </Breadcrumb>
-    </div>
-  </div>
   <PageLoader />
   <ConfirmationModal
     isOpen={false}
@@ -39,26 +19,6 @@ exports[`Details component when consumer gruops are fetched Matches the snapshot
 <div
   className="section"
 >
-  <div
-    className="level"
-  >
-    <div
-      className="level-item level-left"
-    >
-      <Breadcrumb
-        links={
-          Array [
-            Object {
-              "href": "/ui/clusters/local/consumer-groups",
-              "label": "All Consumer Groups",
-            },
-          ]
-        }
-      >
-        test
-      </Breadcrumb>
-    </div>
-  </div>
   <div
     className="box"
   >

kafka-ui-react-app/src/components/ConsumerGroups/List/List.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { ClusterName } from 'redux/interfaces';
 import { ConsumerGroup } from 'generated-sources';
-import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
 
 import ListItem from './ListItem';
 
@@ -19,8 +18,6 @@ const List: React.FC<Props> = ({ consumerGroups }) => {
 
   return (
     <div className="section">
-      <Breadcrumb>All Consumer Groups</Breadcrumb>
-
       <div className="box">
         <div>
           <div className="columns">

kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClustersWidget.tsx

@@ -42,28 +42,36 @@ const ClustersWidget: React.FC<Props> = ({
 
   return (
     <div>
-      <h5 className="title is-5">Clusters</h5>
-
-      <MetricsWrapper>
-        <Indicator label="Online Clusters">
-          <span className="tag is-success">{onlineClusters.length}</span>
-        </Indicator>
-        <Indicator label="Offline Clusters">
-          <span className="tag is-danger">{offlineClusters.length}</span>
-        </Indicator>
-        <Indicator label="Hide online clusters">
-          <input
-            type="checkbox"
-            className="switch is-rounded"
-            name="switchRoundedDefault"
-            id="switchRoundedDefault"
-            checked={showOfflineOnly}
-            onChange={handleSwitch}
-          />
-          <label htmlFor="switchRoundedDefault" />
-        </Indicator>
-      </MetricsWrapper>
-
+      <div className="metrics-box mb-2">
+        <MetricsWrapper>
+          <Indicator
+            label={<span className="tag is-success">Online</span>}
+            className="is-justify-content-start"
+          >
+            <span data-testid="onlineCount">{onlineClusters.length}</span>{' '}
+            <span className="has-text-grey-light is-size-8">cluster</span>
+          </Indicator>
+          <Indicator
+            label={<span className="tag is-light">Offline</span>}
+            className="is-justify-content-start"
+          >
+            <span data-testid="offlineCount">{offlineClusters.length}</span>{' '}
+            <span className="has-text-grey-light is-size-8">cluster</span>
+          </Indicator>
+        </MetricsWrapper>
+      </div>
+      <div className="p-4">
+        <input
+          type="checkbox"
+          className="switch is-rounded"
+          name="switchRoundedDefault"
+          id="switchRoundedDefault"
+          checked={showOfflineOnly}
+          onChange={handleSwitch}
+        />
+        <label htmlFor="switchRoundedDefault" />
+        <span className="is-size-7">Show only offline clusters</span>
+      </div>
       {clusterList.map((chunkItem) => (
         <div className="columns" key={chunkItem.id}>
           {chunkItem.data.map((cluster) => (

kafka-ui-react-app/src/components/Dashboard/ClustersWidget/__test__/ClustersWidgetContainer.spec.tsx

@@ -12,7 +12,7 @@ describe('ClustersWidgetContainer', () => {
     );
     it(' is empty when no online clusters', () => {
       const wrapper = mount(setupEmptyWrapper());
-      expect(wrapper.find('.is-success').text()).toBe('0');
+      expect(wrapper.find('[data-testid="onlineCount"]').text()).toBe('0');
     });
   });
 });

kafka-ui-react-app/src/components/Dashboard/Dashboard.tsx

@@ -1,16 +1,9 @@
 import React from 'react';
-import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
 
 import ClustersWidgetContainer from './ClustersWidget/ClustersWidgetContainer';
 
 const Dashboard: React.FC = () => (
   <div className="section">
-    <div className="level">
-      <div className="level-item level-left">
-        <Breadcrumb>Dashboard</Breadcrumb>
-      </div>
-    </div>
-
     <ClustersWidgetContainer />
   </div>
 );

kafka-ui-react-app/src/components/KsqlDb/BreadCrumbs/BreadCrumbs.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import Breadcrumb, {
-  BreadcrumbItem,
-} from 'components/common/Breadcrumb/Breadcrumb';
-import { clusterKsqlDbPath, clusterKsqlDbQueryPath } from 'lib/paths';
-import { useParams, useRouteMatch } from 'react-router';
-
-interface RouteParams {
-  clusterName: string;
-}
-
-const Breadcrumbs: React.FC = () => {
-  const { clusterName } = useParams<RouteParams>();
-  const isQuery = useRouteMatch(clusterKsqlDbQueryPath(clusterName));
-
-  if (!isQuery) {
-    return <Breadcrumb>KSQLDB</Breadcrumb>;
-  }
-
-  const links: BreadcrumbItem[] = [
-    {
-      label: 'KSQLDB',
-      href: clusterKsqlDbPath(clusterName),
-    },
-  ];
-
-  return <Breadcrumb links={links}>Query</Breadcrumb>;
-};
-
-export default Breadcrumbs;

kafka-ui-react-app/src/components/KsqlDb/BreadCrumbs/__test__/BreadCrumbs.spec.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import { StaticRouter } from 'react-router';
-import Breadcrumbs from 'components/KsqlDb/BreadCrumbs/BreadCrumbs';
-import { mount } from 'enzyme';
-import { clusterKsqlDbPath, clusterKsqlDbQueryPath } from 'lib/paths';
-
-describe('BreadCrumbs', () => {
-  const clusterName = 'local';
-  const rootPathname = clusterKsqlDbPath(clusterName);
-  const queryPathname = clusterKsqlDbQueryPath(clusterName);
-
-  const setupComponent = (pathname: string) => (
-    <StaticRouter location={{ pathname }} context={{}}>
-      <Breadcrumbs />
-    </StaticRouter>
-  );
-
-  it('Renders root path', () => {
-    const component = mount(setupComponent(rootPathname));
-
-    expect(component.find({ children: 'KSQLDB' }).exists()).toBeTruthy();
-    expect(component.find({ children: 'Query' }).exists()).toBeFalsy();
-  });
-
-  it('Renders query path', () => {
-    const component = mount(setupComponent(queryPathname));
-
-    expect(
-      component.find('a').find({ children: 'KSQLDB' }).exists()
-    ).toBeTruthy();
-    expect(component.find({ children: 'Query' }).exists()).toBeTruthy();
-  });
-});

kafka-ui-react-app/src/components/KsqlDb/KsqlDb.tsx

@@ -3,14 +3,10 @@ import { Switch, Route } from 'react-router-dom';
 import { clusterKsqlDbPath, clusterKsqlDbQueryPath } from 'lib/paths';
 import List from 'components/KsqlDb/List/List';
 import Query from 'components/KsqlDb/Query/Query';
-import Breadcrumbs from 'components/KsqlDb/BreadCrumbs/BreadCrumbs';
 
 const KsqlDb: React.FC = () => {
   return (
     <div className="section">
-      <Switch>
-        <Route path={clusterKsqlDbPath()} component={Breadcrumbs} />
-      </Switch>
       <Switch>
         <Route exact path={clusterKsqlDbPath()} component={List} />
         <Route exact path={clusterKsqlDbQueryPath()} component={Query} />

kafka-ui-react-app/src/components/KsqlDb/__test__/__snapshots__/KsqlDb.spec.tsx.snap

@@ -35,7 +35,6 @@ exports[`KsqlDb Component KsqlDb matches snapshot 1`] = `
         className="section"
       >
         <Switch />
-        <Switch />
       </div>
     </KsqlDb>
   </Router>

kafka-ui-react-app/src/components/Schemas/Details/Details.tsx

@@ -3,7 +3,6 @@ import { useHistory } from 'react-router';
 import { SchemaSubject } from 'generated-sources';
 import { ClusterName, SchemaName } from 'redux/interfaces';
 import { clusterSchemasPath, clusterSchemaSchemaEditPath } from 'lib/paths';
-import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
 import ClusterContext from 'components/contexts/ClusterContext';
 import { Link } from 'react-router-dom';
 import ConfirmationModal from 'components/common/ConfirmationModal/ConfirmationModal';
@@ -57,18 +56,6 @@ const Details: React.FC<DetailsProps> = ({
 
   return (
     <div className="section">
-      <div className="level">
-        <Breadcrumb
-          links={[
-            {
-              href: clusterSchemasPath(clusterName),
-              label: 'Schema Registry',
-            },
-          ]}
-        >
-          {subject}
-        </Breadcrumb>
-      </div>
       {areVersionsFetched && areSchemasFetched ? (
         <>
           <div className="box">

kafka-ui-react-app/src/components/Schemas/Details/__test__/__snapshots__/Details.spec.tsx.snap

@@ -4,22 +4,6 @@ exports[`Details View Initial state matches snapshot 1`] = `
 <div
   className="section"
 >
-  <div
-    className="level"
-  >
-    <Breadcrumb
-      links={
-        Array [
-          Object {
-            "href": "/ui/clusters/testCluster/schemas",
-            "label": "Schema Registry",
-          },
-        ]
-      }
-    >
-      test
-    </Breadcrumb>
-  </div>
   <div
     className="box"
   >
@@ -128,22 +112,6 @@ exports[`Details View when page with schema versions is loading matches snapshot
 <div
   className="section"
 >
-  <div
-    className="level"
-  >
-    <Breadcrumb
-      links={
-        Array [
-          Object {
-            "href": "/ui/clusters/testCluster/schemas",
-            "label": "Schema Registry",
-          },
-        ]
-      }
-    >
-      test
-    </Breadcrumb>
-  </div>
   <PageLoader />
 </div>
 `;
@@ -152,22 +120,6 @@ exports[`Details View when page with schema versions loaded when schema has vers
 <div
   className="section"
 >
-  <div
-    className="level"
-  >
-    <Breadcrumb
-      links={
-        Array [
-          Object {
-            "href": "/ui/clusters/testCluster/schemas",
-            "label": "Schema Registry",
-          },
-        ]
-      }
-    >
-      test
-    </Breadcrumb>
-  </div>
   <div
     className="box"
   >
@@ -295,22 +247,6 @@ exports[`Details View when page with schema versions loaded when versions are em
 <div
   className="section"
 >
-  <div
-    className="level"
-  >
-    <Breadcrumb
-      links={
-        Array [
-          Object {
-            "href": "/ui/clusters/testCluster/schemas",
-            "label": "Schema Registry",
-          },
-        ]
-      }
-    >
-      test
-    </Breadcrumb>
-  </div>
   <div
     className="box"
   >
@@ -419,22 +355,6 @@ exports[`Details View when page with schemas are loading matches snapshot 1`] =
 <div
   className="section"
 >
-  <div
-    className="level"
-  >
-    <Breadcrumb
-      links={
-        Array [
-          Object {
-            "href": "/ui/clusters/testCluster/schemas",
-            "label": "Schema Registry",
-          },
-        ]
-      }
-    >
-      test
-    </Breadcrumb>
-  </div>
   <PageLoader />
 </div>
 `;

kafka-ui-react-app/src/components/Schemas/Edit/Edit.tsx

@@ -6,11 +6,10 @@ import {
   SchemaSubject,
   SchemaType,
 } from 'generated-sources';
-import { clusterSchemaPath, clusterSchemasPath } from 'lib/paths';
+import { clusterSchemaPath } from 'lib/paths';
 import { ClusterName, NewSchemaSubjectRaw, SchemaName } from 'redux/interfaces';
 import PageLoader from 'components/common/PageLoader/PageLoader';
 import JSONEditor from 'components/common/JSONEditor/JSONEditor';
-import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
 
 export interface EditProps {
   subject: SchemaName;
@@ -81,25 +80,6 @@ const Edit = ({
 
   return (
     <div className="section">
-      <div className="level">
-        <div className="level-item level-left">
-          <Breadcrumb
-            links={[
-              {
-                href: clusterSchemasPath(clusterName),
-                label: 'Schema Registry',
-              },
-              {
-                href: clusterSchemaPath(clusterName, subject),
-                label: subject,
-              },
-            ]}
-          >
-            Edit
-          </Breadcrumb>
-        </div>
-      </div>
-
       {schemasAreFetched ? (
         <div className="box">
           <form

kafka-ui-react-app/src/components/Schemas/Edit/__tests__/__snapshots__/Edit.spec.tsx.snap

@@ -4,30 +4,6 @@ exports[`Edit Component when schemas are fetched matches the snapshot 1`] = `
 <div
   className="section"
 >
-  <div
-    className="level"
-  >
-    <div
-      className="level-item level-left"
-    >
-      <Breadcrumb
-        links={
-          Array [
-            Object {
-              "href": "/ui/clusters/ClusterName/schemas",
-              "label": "Schema Registry",
-            },
-            Object {
-              "href": "/ui/clusters/ClusterName/schemas/Subject/latest",
-              "label": "Subject",
-            },
-          ]
-        }
-      >
-        Edit
-      </Breadcrumb>
-    </div>
-  </div>
   <div
     className="box"
   >
@@ -294,30 +270,6 @@ exports[`Edit Component when schemas are not fetched matches the snapshot 1`] =
 <div
   className="section"
 >
-  <div
-    className="level"
-  >
-    <div
-      className="level-item level-left"
-    >
-      <Breadcrumb
-        links={
-          Array [
-            Object {
-              "href": "/ui/clusters/ClusterName/schemas",
-              "label": "Schema Registry",
-            },
-            Object {
-              "href": "/ui/clusters/ClusterName/schemas/Subject/latest",
-              "label": "Subject",
-            },
-          ]
-        }
-      >
-        Edit
-      </Breadcrumb>
-    </div>
-  </div>
   <PageLoader />
 </div>
 `;

kafka-ui-react-app/src/components/Schemas/List/List.tsx

@@ -7,7 +7,6 @@ import { Link, useParams } from 'react-router-dom';
 import { clusterSchemaNewPath } from 'lib/paths';
 import { ClusterName } from 'redux/interfaces';
 import PageLoader from 'components/common/PageLoader/PageLoader';
-import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
 import ClusterContext from 'components/contexts/ClusterContext';
 
 import ListItem from './ListItem';
@@ -47,7 +46,6 @@ const List: React.FC<ListProps> = ({
 
   return (
     <div className="section">
-      <Breadcrumb>Schema Registry</Breadcrumb>
       <div className="box">
         <div className="level">
           {!isReadOnly && isGlobalSchemaCompatibilityLevelFetched && (

kafka-ui-react-app/src/components/Schemas/List/ListItem.tsx

@@ -14,7 +14,7 @@ const ListItem: React.FC<ListItemProps> = ({
       <td>
         <NavLink
           exact
-          to={`schemas/${subject}/latest`}
+          to={`schemas/${subject}`}
           activeClassName="is-active"
           className="title is-6"
         >

kafka-ui-react-app/src/components/Schemas/List/__test__/List.spec.tsx

@@ -66,7 +66,6 @@ describe('List', () => {
     describe('when fetching', () => {
       it('renders PageLoader', () => {
         const wrapper = mount(setupWrapper({ isFetching: true }));
-        expect(wrapper.exists('Breadcrumb')).toBeTruthy();
         expect(wrapper.exists('thead')).toBeFalsy();
         expect(wrapper.exists('ListItem')).toBeFalsy();
         expect(wrapper.exists('PageLoader')).toBeTruthy();
@@ -76,7 +75,6 @@ describe('List', () => {
     describe('without schemas', () => {
       it('renders table heading without ListItem', () => {
         const wrapper = mount(setupWrapper({ isFetching: false }));
-        expect(wrapper.exists('Breadcrumb')).toBeTruthy();
         expect(wrapper.exists('thead')).toBeTruthy();
         expect(wrapper.exists('ListItem')).toBeFalsy();
       });
@@ -86,7 +84,6 @@ describe('List', () => {
       const wrapper = mount(setupWrapper({ isFetching: false, schemas }));
 
       it('renders table heading with ListItem', () => {
-        expect(wrapper.exists('Breadcrumb')).toBeTruthy();
         expect(wrapper.exists('thead')).toBeTruthy();
         expect(wrapper.find('ListItem').length).toEqual(3);
       });

kafka-ui-react-app/src/components/Schemas/List/__test__/__snapshots__/ListItem.spec.tsx.snap

@@ -44,7 +44,7 @@ exports[`ListItem matches snapshot 1`] = `
                 activeClassName="is-active"
                 className="title is-6"
                 exact={true}
-                to="schemas/test/latest"
+                to="schemas/test"
               >
                 <Link
                   aria-current={null}
@@ -52,7 +52,7 @@ exports[`ListItem matches snapshot 1`] = `
                   to={
                     Object {
                       "hash": "",
-                      "pathname": "/schemas/test/latest",
+                      "pathname": "/schemas/test",
                       "search": "",
                       "state": null,
                     }
@@ -61,13 +61,13 @@ exports[`ListItem matches snapshot 1`] = `
                   <LinkAnchor
                     aria-current={null}
                     className="title is-6"
-                    href="/schemas/test/latest"
+                    href="/schemas/test"
                     navigate={[Function]}
                   >
                     <a
                       aria-current={null}
                       className="title is-6"
-                      href="/schemas/test/latest"
+                      href="/schemas/test"
                       onClick={[Function]}
                     >
                       test

kafka-ui-react-app/src/components/Schemas/New/New.tsx

@@ -2,8 +2,7 @@ import React from 'react';
 import { ClusterName, NewSchemaSubjectRaw } from 'redux/interfaces';
 import { useForm } from 'react-hook-form';
 import { ErrorMessage } from '@hookform/error-message';
-import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
-import { clusterSchemaPath, clusterSchemasPath } from 'lib/paths';
+import { clusterSchemaPath } from 'lib/paths';
 import { NewSchemaSubject, SchemaType } from 'generated-sources';
 import { SCHEMA_NAME_VALIDATION_PATTERN } from 'lib/constants';
 import { useHistory, useParams } from 'react-router';
@@ -42,21 +41,6 @@ const New: React.FC<NewProps> = ({ createSchema }) => {
 
   return (
     <div className="section">
-      <div className="level">
-        <div className="level-item level-left">
-          <Breadcrumb
-            links={[
-              {
-                href: clusterSchemasPath(clusterName),
-                label: 'Schema Registry',
-              },
-            ]}
-          >
-            New Schema
-          </Breadcrumb>
-        </div>
-      </div>
-
       <div className="box">
         <form onSubmit={handleSubmit(onSubmit)}>
           <div>

kafka-ui-react-app/src/components/Schemas/New/__test__/New.spec.tsx

@@ -22,7 +22,7 @@ describe('New', () => {
   });
 
   describe('View', () => {
-    const pathname = '/ui/clusters/clusterName/schemas/create_new';
+    const pathname = '/ui/clusters/clusterName/schemas/create-new';
 
     const setupWrapper = (props: Partial<NewProps> = {}) => (
       <StaticRouter location={{ pathname }} context={{}}>

kafka-ui-react-app/src/components/Schemas/New/__test__/__snapshots__/New.spec.tsx.snap

@@ -5,7 +5,7 @@ exports[`New View matches snapshot 1`] = `
   context={Object {}}
   location={
     Object {
-      "pathname": "/ui/clusters/clusterName/schemas/create_new",
+      "pathname": "/ui/clusters/clusterName/schemas/create-new",
     }
   }
 >
@@ -21,7 +21,7 @@ exports[`New View matches snapshot 1`] = `
         "listen": [Function],
         "location": Object {
           "hash": "",
-          "pathname": "/ui/clusters/clusterName/schemas/create_new",
+          "pathname": "/ui/clusters/clusterName/schemas/create-new",
           "search": "",
         },
         "push": [Function],
@@ -36,60 +36,6 @@ exports[`New View matches snapshot 1`] = `
       <div
         className="section"
       >
-        <div
-          className="level"
-        >
-          <div
-            className="level-item level-left"
-          >
-            <Breadcrumb
-              links={
-                Array [
-                  Object {
-                    "href": "/ui/clusters/undefined/schemas",
-                    "label": "Schema Registry",
-                  },
-                ]
-              }
-            >
-              <nav
-                aria-label="breadcrumbs"
-                className="breadcrumb"
-              >
-                <ul>
-                  <li
-                    key="/ui/clusters/undefined/schemas"
-                  >
-                    <Link
-                      to="/ui/clusters/undefined/schemas"
-                    >
-                      <LinkAnchor
-                        href="/ui/clusters/undefined/schemas"
-                        navigate={[Function]}
-                      >
-                        <a
-                          href="/ui/clusters/undefined/schemas"
-                          onClick={[Function]}
-                        >
-                          Schema Registry
-                        </a>
-                      </LinkAnchor>
-                    </Link>
-                  </li>
-                  <li
-                    className="is-active"
-                  >
-                    <span
-                      className=""
-                    >
-                      New Schema
-                    </span>
-                  </li>
-                </ul>
-              </nav>
-            </Breadcrumb>
-          </div>
-        </div>
         <div
           className="box"
         >

kafka-ui-react-app/src/components/Topics/List/List.tsx

@@ -5,7 +5,6 @@ import {
   ClusterName,
   TopicName,
 } from 'redux/interfaces';
-import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
 import { Link, useParams } from 'react-router-dom';
 import { clusterTopicNewPath } from 'lib/paths';
 import usePagination from 'lib/hooks/usePagination';
@@ -124,7 +123,6 @@ const List: React.FC<TopicsListProps> = ({
 
   return (
     <div className="section">
-      <Breadcrumb>{showInternal ? `All Topics` : `External Topics`}</Breadcrumb>
       <div className="box">
         <div className="columns">
           <div className="column is-one-quarter is-align-items-center is-flex">

kafka-ui-react-app/src/components/Topics/List/__tests__/__snapshots__/List.spec.tsx.snap

@@ -62,24 +62,6 @@ exports[`List when it does not have readonly flag matches the snapshot 1`] = `
       <div
         className="section"
       >
-        <Breadcrumb>
-          <nav
-            aria-label="breadcrumbs"
-            className="breadcrumb"
-          >
-            <ul>
-              <li
-                className="is-active"
-              >
-                <span
-                  className=""
-                >
-                  All Topics
-                </span>
-              </li>
-            </ul>
-          </nav>
-        </Breadcrumb>
         <div
           className="box"
         >
@@ -140,16 +122,16 @@ exports[`List when it does not have readonly flag matches the snapshot 1`] = `
             >
               <Link
                 className="button is-primary"
-                to="/ui/clusters/undefined/topics/create_new"
+                to="/ui/clusters/undefined/topics/create-new"
               >
                 <LinkAnchor
                   className="button is-primary"
-                  href="/ui/clusters/undefined/topics/create_new"
+                  href="/ui/clusters/undefined/topics/create-new"
                   navigate={[Function]}
                 >
                   <a
                     className="button is-primary"
-                    href="/ui/clusters/undefined/topics/create_new"
+                    href="/ui/clusters/undefined/topics/create-new"
                     onClick={[Function]}
                   >
                     Add a Topic

kafka-ui-react-app/src/components/Topics/New/New.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import { ClusterName, TopicFormData, FailurePayload } from 'redux/interfaces';
 import { useForm, FormProvider } from 'react-hook-form';
-import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
-import { clusterTopicPath, clusterTopicsPath } from 'lib/paths';
+import { clusterTopicPath } from 'lib/paths';
 import TopicForm from 'components/Topics/shared/Form/TopicForm';
 import {
   formatTopicCreation,
@@ -45,18 +44,6 @@ const New: React.FC = () => {
 
   return (
     <div className="section">
-      <div className="level">
-        <div className="level-item level-left">
-          <Breadcrumb
-            links={[
-              { href: clusterTopicsPath(clusterName), label: 'All Topics' },
-            ]}
-          >
-            New Topic
-          </Breadcrumb>
-        </div>
-      </div>
-
       <div className="box">
         <FormProvider {...methods}>
           <TopicForm

kafka-ui-react-app/src/components/Topics/Topic/Topic.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
 import { Switch, Route, useParams } from 'react-router-dom';
-import { clusterTopicPath, clusterTopicsPath } from 'lib/paths';
 import { ClusterName, TopicName } from 'redux/interfaces';
-import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
 import EditContainer from 'components/Topics/Topic/Edit/EditContainer';
 import DetailsContainer from 'components/Topics/Topic/Details/DetailsContainer';
 import PageLoader from 'components/common/PageLoader/PageLoader';
@@ -29,42 +27,8 @@ const Topic: React.FC<TopicProps> = ({
     fetchTopicDetails(clusterName, topicName);
   }, [fetchTopicDetails, clusterName, topicName]);
 
-  const rootBreadcrumbLinks = [
-    {
-      href: clusterTopicsPath(clusterName),
-      label: 'All Topics',
-    },
-  ];
-
-  const childBreadcrumbLinks = [
-    ...rootBreadcrumbLinks,
-    {
-      href: clusterTopicPath(clusterName, topicName),
-      label: topicName,
-    },
-  ];
-
-  const topicPageUrl = '/ui/clusters/:clusterName/topics/:topicName';
-
   return (
     <div className="section">
-      <div className="level">
-        <div className="level-item level-left">
-          <Switch>
-            <Route exact path={`${topicPageUrl}/message`}>
-              <Breadcrumb links={childBreadcrumbLinks}>
-                Produce Message
-              </Breadcrumb>
-            </Route>
-            <Route exact path={`${topicPageUrl}/edit`}>
-              <Breadcrumb links={childBreadcrumbLinks}>Edit</Breadcrumb>
-            </Route>
-            <Route path={topicPageUrl}>
-              <Breadcrumb links={rootBreadcrumbLinks}>{topicName}</Breadcrumb>
-            </Route>
-          </Switch>
-        </div>
-      </div>
       {isTopicFetching ? (
         <PageLoader />
       ) : (

kafka-ui-react-app/src/components/__tests__/__snapshots__/App.spec.tsx.snap

@@ -162,6 +162,24 @@ exports[`App view matches snapshot 1`] = `
               onKeyDown={[Function]}
               tabIndex={-1}
             />
+            <Breadcrumb>
+              <nav
+                aria-label="breadcrumbs"
+                className="breadcrumb mb-2 pt-2"
+              >
+                <ul
+                  className="py-3 px-4 py-3"
+                >
+                  <li
+                    className="is-active is-size-4 has-text-weight-medium is-capitalized"
+                  >
+                    <span>
+                      Dashboard
+                    </span>
+                  </li>
+                </ul>
+              </nav>
+            </Breadcrumb>
             <Switch>
               <Route
                 component={[Function]}
@@ -231,32 +249,6 @@ exports[`App view matches snapshot 1`] = `
                   <div
                     className="section"
                   >
-                    <div
-                      className="level"
-                    >
-                      <div
-                        className="level-item level-left"
-                      >
-                        <Breadcrumb>
-                          <nav
-                            aria-label="breadcrumbs"
-                            className="breadcrumb"
-                          >
-                            <ul>
-                              <li
-                                className="is-active"
-                              >
-                                <span
-                                  className=""
-                                >
-                                  Dashboard
-                                </span>
-                              </li>
-                            </ul>
-                          </nav>
-                        </Breadcrumb>
-                      </div>
-                    </div>
                     <Connect(ClustersWidget)>
                       <ClustersWidget
                         clusters={Array []}
@@ -265,105 +257,124 @@ exports[`App view matches snapshot 1`] = `
                         onlineClusters={Array []}
                       >
                         <div>
-                          <h5
-                            className="title is-5"
+                          <div
+                            className="metrics-box mb-2"
                           >
-                            Clusters
-                          </h5>
-                          <MetricsWrapper>
-                            <div
-                              className="box"
-                            >
-                              <div
-                                className="level"
-                              >
-                                <Indicator
-                                  label="Online Clusters"
+                            <MetricsWrapper>
+                              <div>
+                                <div
+                                  className="box"
                                 >
                                   <div
-                                    className="level-item"
+                                    className="level"
                                   >
-                                    <div
-                                      title="Online Clusters"
-                                    >
-                                      <p
-                                        className="heading"
-                                      >
-                                        Online Clusters
-                                      </p>
-                                      <p
-                                        className="title has-text-centered"
-                                      >
+                                    <Indicator
+                                      className="is-justify-content-start"
+                                      label={
                                         <span
                                           className="tag is-success"
                                         >
-                                          0
+                                          Online
                                         </span>
-                                      </p>
-                                    </div>
-                                  </div>
-                                </Indicator>
-                                <Indicator
-                                  label="Offline Clusters"
-                                >
-                                  <div
-                                    className="level-item"
-                                  >
-                                    <div
-                                      title="Offline Clusters"
+                                      }
                                     >
-                                      <p
-                                        className="heading"
-                                      >
-                                        Offline Clusters
-                                      </p>
-                                      <p
-                                        className="title has-text-centered"
+                                      <div
+                                        className="level-item is-justify-content-start"
                                       >
+                                        <div>
+                                          <p
+                                            className="is-size-8"
+                                          >
+                                            <span
+                                              className="tag is-success"
+                                            >
+                                              Online
+                                            </span>
+                                          </p>
+                                          <p
+                                            className="is-size-6 has-text-weight-medium"
+                                          >
+                                            <span
+                                              data-testid="onlineCount"
+                                            >
+                                              0
+                                            </span>
+                                             
+                                            <span
+                                              className="has-text-grey-light is-size-8"
+                                            >
+                                              cluster
+                                            </span>
+                                          </p>
+                                        </div>
+                                      </div>
+                                    </Indicator>
+                                    <Indicator
+                                      className="is-justify-content-start"
+                                      label={
                                         <span
-                                          className="tag is-danger"
+                                          className="tag is-light"
                                         >
-                                          0
+                                          Offline
                                         </span>
-                                      </p>
-                                    </div>
-                                  </div>
-                                </Indicator>
-                                <Indicator
-                                  label="Hide online clusters"
-                                >
-                                  <div
-                                    className="level-item"
-                                  >
-                                    <div
-                                      title="Hide online clusters"
+                                      }
                                     >
-                                      <p
-                                        className="heading"
-                                      >
-                                        Hide online clusters
-                                      </p>
-                                      <p
-                                        className="title has-text-centered"
+                                      <div
+                                        className="level-item is-justify-content-start"
                                       >
-                                        <input
-                                          checked={false}
-                                          className="switch is-rounded"
-                                          id="switchRoundedDefault"
-                                          name="switchRoundedDefault"
-                                          onChange={[Function]}
-                                          type="checkbox"
-                                        />
-                                        <label
-                                          htmlFor="switchRoundedDefault"
-                                        />
-                                      </p>
-                                    </div>
+                                        <div>
+                                          <p
+                                            className="is-size-8"
+                                          >
+                                            <span
+                                              className="tag is-light"
+                                            >
+                                              Offline
+                                            </span>
+                                          </p>
+                                          <p
+                                            className="is-size-6 has-text-weight-medium"
+                                          >
+                                            <span
+                                              data-testid="offlineCount"
+                                            >
+                                              0
+                                            </span>
+                                             
+                                            <span
+                                              className="has-text-grey-light is-size-8"
+                                            >
+                                              cluster
+                                            </span>
+                                          </p>
+                                        </div>
+                                      </div>
+                                    </Indicator>
                                   </div>
-                                </Indicator>
+                                </div>
                               </div>
-                            </div>
-                          </MetricsWrapper>
+                            </MetricsWrapper>
+                          </div>
+                          <div
+                            className="p-4"
+                          >
+                            <input
+                              checked={false}
+                              className="switch is-rounded"
+                              id="switchRoundedDefault"
+                              name="switchRoundedDefault"
+                              onChange={[Function]}
+                              type="checkbox"
+                            />
+                            <label
+                              htmlFor="switchRoundedDefault"
+                            />
+                            <span
+                              className="is-size-7"
+                            >
+                              Show only offline clusters
+                            </span>
+                          </div>
                         </div>
                       </ClustersWidget>
                     </Connect(ClustersWidget)>

kafka-ui-react-app/src/components/common/Breadcrumb/Breadcrumb.tsx

@@ -1,5 +1,8 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useLocation, useParams } from 'react-router-dom';
+import cn from 'classnames';
+import { clusterPath } from 'lib/paths';
+import { capitalize } from 'lodash';
 
 export interface BreadcrumbItem {
   label: string;
@@ -10,19 +13,50 @@ interface Props {
   links?: BreadcrumbItem[];
 }
 
-const Breadcrumb: React.FC<Props> = ({ links, children }) => {
+const basePathEntriesLength = clusterPath(':clusterName').split('/').length;
+
+const Breadcrumb: React.FC<Props> = () => {
+  const location = useLocation();
+  const params = useParams();
+  const pathParams = React.useMemo(() => Object.values(params), [params]);
+
+  const paths = location.pathname.split('/');
+  const links = React.useMemo(
+    () =>
+      paths.slice(basePathEntriesLength).map((path, index) => {
+        return !pathParams.includes(paths[basePathEntriesLength + index])
+          ? path.split('-').map(capitalize).join(' ')
+          : path;
+      }),
+    [paths]
+  );
+  const currentLink = React.useMemo(() => {
+    if (paths.length < basePathEntriesLength) {
+      return 'Dashboard';
+    }
+    return links[links.length - 1];
+  }, [links]);
+
+  const getPathPredicate = React.useCallback(
+    (index: number) =>
+      `${paths.slice(0, basePathEntriesLength + index + 1).join('/')}`,
+    [paths]
+  );
+
   return (
-    <nav className="breadcrumb" aria-label="breadcrumbs">
-      <ul>
-        {links &&
-          links.map(({ label, href }) => (
-            <li key={href}>
-              <Link to={href}>{label}</Link>
-            </li>
-          ))}
-
-        <li className="is-active">
-          <span className="">{children}</span>
+    <nav className="breadcrumb mb-2 pt-2" aria-label="breadcrumbs">
+      <ul className={cn('py-3', 'px-4', { 'py-3': !links.length })}>
+        {links.slice(0, links.length - 1).map((link, index) => (
+          <li key={link}>
+            <Link to={getPathPredicate(index)}>{link}</Link>
+          </li>
+        ))}
+        <li
+          className={cn('is-active', {
+            'is-size-4 has-text-weight-medium is-capitalized': links.length < 2,
+          })}
+        >
+          <span>{currentLink}</span>
         </li>
       </ul>
     </nav>

kafka-ui-react-app/src/components/common/Breadcrumb/__tests__/Breadcrumb.spec.tsx

@@ -1,50 +1,26 @@
-import { mount, shallow } from 'enzyme';
 import React from 'react';
 import { StaticRouter } from 'react-router-dom';
-import Breadcrumb, {
-  BreadcrumbItem,
-} from 'components/common/Breadcrumb/Breadcrumb';
+import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
+import { render, screen } from '@testing-library/react';
 
-describe('Breadcrumb component', () => {
-  const links: BreadcrumbItem[] = [
-    {
-      label: 'link1',
-      href: 'link1href',
-    },
-    {
-      label: 'link2',
-      href: 'link2href',
-    },
-    {
-      label: 'link3',
-      href: 'link3href',
-    },
-  ];
-
-  const child = <div className="child" />;
-
-  const component = mount(
-    <StaticRouter>
-      <Breadcrumb links={links}>{child}</Breadcrumb>
-    </StaticRouter>
-  );
+const brokersPath = '/ui/clusters/local/brokers';
+const createTopicPath = '/ui/clusters/local/topics/create-new';
 
-  it('renders the list of links', () => {
-    component.find(`Link`).forEach((link, idx) => {
-      expect(link.prop('to')).toEqual(links[idx].href);
-      expect(link.contains(links[idx].label)).toBeTruthy();
-    });
-  });
-  it('renders the children', () => {
-    const list = component.find('ul').children();
-    expect(list.last().containsMatchingElement(child)).toBeTruthy();
-  });
-  it('matches the snapshot', () => {
-    const shallowComponent = shallow(
-      <StaticRouter>
-        <Breadcrumb links={links}>{child}</Breadcrumb>
+describe('Breadcrumb component', () => {
+  const setupComponent = (pathname: string) =>
+    render(
+      <StaticRouter location={{ pathname }}>
+        <Breadcrumb />
       </StaticRouter>
     );
-    expect(shallowComponent).toMatchSnapshot();
+
+  it('renders the name of brokers path', async () => {
+    setupComponent(brokersPath);
+    expect(screen.findByText('Brokers')).toBeTruthy();
+  });
+  it('renders the list of links', () => {
+    setupComponent(createTopicPath);
+    expect(screen.findByText('Topic')).toBeTruthy();
+    expect(screen.findByText('Create New')).toBeTruthy();
   });
 });

kafka-ui-react-app/src/components/common/Breadcrumb/__tests__/__snapshots__/Breadcrumb.spec.tsx.snap

@@ -1,49 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Breadcrumb component matches the snapshot 1`] = `
-<Router
-  history={
-    Object {
-      "action": "POP",
-      "block": [Function],
-      "createHref": [Function],
-      "go": [Function],
-      "goBack": [Function],
-      "goForward": [Function],
-      "listen": [Function],
-      "location": Object {
-        "hash": "",
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-      "push": [Function],
-      "replace": [Function],
-    }
-  }
-  staticContext={Object {}}
->
-  <Breadcrumb
-    links={
-      Array [
-        Object {
-          "href": "link1href",
-          "label": "link1",
-        },
-        Object {
-          "href": "link2href",
-          "label": "link2",
-        },
-        Object {
-          "href": "link3href",
-          "label": "link3",
-        },
-      ]
-    }
-  >
-    <div
-      className="child"
-    />
-  </Breadcrumb>
-</Router>
-`;

kafka-ui-react-app/src/components/common/Dashboard/Indicator.tsx

@@ -3,7 +3,7 @@ import cx from 'classnames';
 
 interface Props {
   fetching?: boolean;
-  label: string;
+  label: React.ReactNode;
   title?: string;
   className?: string;
 }
@@ -17,9 +17,9 @@ const Indicator: React.FC<Props> = ({
 }) => {
   return (
     <div className={cx('level-item', className)}>
-      <div title={title || label}>
-        <p className="heading">{label}</p>
-        <p className="title has-text-centered">
+      <div title={title}>
+        <p className="is-size-8">{label}</p>
+        <p className="is-size-6 has-text-weight-medium">
           {fetching ? (
             <span className="icon has-text-grey-light">
               <i className="fas fa-spinner fa-pulse" />

kafka-ui-react-app/src/components/common/Dashboard/MetricsWrapper.tsx

@@ -14,10 +14,12 @@ const MetricsWrapper: React.FC<Props> = ({
   multiline,
 }) => {
   return (
-    <div className={cx('box', wrapperClassName)}>
-      {title && <h5 className="subtitle is-6">{title}</h5>}
-      <div className={cx('level', multiline ? 'level-multiline' : '')}>
-        {children}
+    <div className={wrapperClassName}>
+      {title && <h5 className="is-7 has-text-weight-medium mb-2">{title}</h5>}
+      <div className="box">
+        <div className={cx('level', multiline ? 'level-multiline' : '')}>
+          {children}
+        </div>
       </div>
     </div>
   );

kafka-ui-react-app/src/components/common/Dashboard/__tests__/MetricsWrapper.spec.tsx

@@ -14,11 +14,11 @@ describe('MetricsWrapper', () => {
 
   it('correctly renders children', () => {
     let component = shallow(<MetricsWrapper />);
-    expect(component.exists('.subtitle')).toBeFalsy();
+    expect(component.exists('.is-7')).toBeFalsy();
 
     const title = 'title';
     component = shallow(<MetricsWrapper title={title} />);
-    expect(component.exists('.subtitle')).toBeTruthy();
+    expect(component.exists('.is-7')).toBeTruthy();
     expect(component.text()).toEqual(title);
   });
 });

kafka-ui-react-app/src/components/common/Dashboard/__tests__/__snapshots__/Indicator.spec.tsx.snap

@@ -12,12 +12,12 @@ exports[`Indicator matches the snapshot 1`] = `
       title="title"
     >
       <p
-        className="heading"
+        className="is-size-8"
       >
         label
       </p>
       <p
-        className="title has-text-centered"
+        className="is-size-6 has-text-weight-medium"
       >
         Child
       </p>

kafka-ui-react-app/src/lib/__test__/paths.spec.ts

@@ -27,12 +27,12 @@ describe('Paths', () => {
   });
   it('clusterSchemaNewPath', () => {
     expect(paths.clusterSchemaNewPath('local')).toEqual(
-      '/ui/clusters/local/schemas/create_new'
+      '/ui/clusters/local/schemas/create-new'
     );
   });
   it('clusterSchemaPath', () => {
     expect(paths.clusterSchemaPath('local', 'schema123')).toEqual(
-      '/ui/clusters/local/schemas/schema123/latest'
+      '/ui/clusters/local/schemas/schema123'
     );
   });
 
@@ -43,7 +43,7 @@ describe('Paths', () => {
   });
   it('clusterTopicNewPath', () => {
     expect(paths.clusterTopicNewPath('local')).toEqual(
-      '/ui/clusters/local/topics/create_new'
+      '/ui/clusters/local/topics/create-new'
     );
   });
   it('clusterTopicPath', () => {

kafka-ui-react-app/src/lib/paths.ts

@@ -11,7 +11,8 @@ import { GIT_REPO_LINK } from './constants';
 export const gitCommitPath = (commit: string) =>
   `${GIT_REPO_LINK}/commit/${commit}`;
 
-const clusterPath = (clusterName: ClusterName) => `/ui/clusters/${clusterName}`;
+export const clusterPath = (clusterName: ClusterName) =>
+  `/ui/clusters/${clusterName}`;
 
 // Brokers
 export const clusterBrokersPath = (clusterName: ClusterName) =>
@@ -33,11 +34,11 @@ export const clusterConsumerGroupResetOffsetsPath = (
 export const clusterSchemasPath = (clusterName: ClusterName) =>
   `${clusterPath(clusterName)}/schemas`;
 export const clusterSchemaNewPath = (clusterName: ClusterName) =>
-  `${clusterPath(clusterName)}/schemas/create_new`;
+  `${clusterPath(clusterName)}/schemas/create-new`;
 export const clusterSchemaPath = (
   clusterName: ClusterName,
   subject: SchemaName
-) => `${clusterSchemasPath(clusterName)}/${subject}/latest`;
+) => `${clusterSchemasPath(clusterName)}/${subject}`;
 export const clusterSchemaSchemaEditPath = (
   clusterName: ClusterName,
   subject: SchemaName
@@ -47,7 +48,7 @@ export const clusterSchemaSchemaEditPath = (
 export const clusterTopicsPath = (clusterName: ClusterName) =>
   `${clusterPath(clusterName)}/topics`;
 export const clusterTopicNewPath = (clusterName: ClusterName) =>
-  `${clusterPath(clusterName)}/topics/create_new`;
+  `${clusterPath(clusterName)}/topics/create-new`;
 export const clusterTopicPath = (
   clusterName: ClusterName,
   topicName: TopicName
@@ -67,7 +68,7 @@ export const clusterTopicEditPath = (
 export const clusterTopicConsumerGroupsPath = (
   clusterName: ClusterName,
   topicName: TopicName
-) => `${clusterTopicsPath(clusterName)}/${topicName}/consumergroups`;
+) => `${clusterTopicsPath(clusterName)}/${topicName}/consumer-groups`;
 export const clusterTopicSendMessagePath = (
   clusterName: ClusterName,
   topicName: TopicName
@@ -79,7 +80,7 @@ export const clusterConnectsPath = (clusterName: ClusterName) =>
 export const clusterConnectorsPath = (clusterName: ClusterName) =>
   `${clusterPath(clusterName)}/connectors`;
 export const clusterConnectorNewPath = (clusterName: ClusterName) =>
-  `${clusterConnectorsPath(clusterName)}/create_new`;
+  `${clusterConnectorsPath(clusterName)}/create-new`;
 const clusterConnectConnectorsPath = (
   clusterName: ClusterName,
   connectName: ConnectName

kafka-ui-react-app/src/theme/bulma_overrides.scss

@@ -14,6 +14,8 @@
     max-height: 73px;
     overflow: hidden;
     text-overflow: ellipsis;
+    background-color: #fff;
+
     background: -webkit-linear-gradient(
       90deg,
       rgba(0, 0, 0, 0.1) 0%,
@@ -85,3 +87,13 @@
 .is-size-8 {
   font-size: $size-8;
 }
+
+.box {
+  box-shadow: none;
+}
+
+.tag:not(body) {
+  font-size: 0.75rem;
+  height: 1.75em;
+  line-height: 1.75;
+}

kafka-ui-react-app/src/theme/index.scss

@@ -15,21 +15,7 @@ html {
   font-family: 'Inter', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background: repeating-linear-gradient(
-      145deg,
-      rgba(0, 0, 0, 0.003),
-      rgba(0, 0, 0, 0.005) 5px,
-      rgba(0, 0, 0, 0) 5px,
-      rgba(0, 0, 0, 0) 10px
-    ),
-    repeating-linear-gradient(
-      -145deg,
-      rgba(0, 0, 0, 0.003),
-      rgba(0, 0, 0, 0.005) 5px,
-      rgba(0, 0, 0, 0) 5px,
-      rgba(0, 0, 0, 0) 10px
-    );
-  background-color: $light;
+  background-color: $white;
 }
 
 code {

kafka-ui-react-app/src/theme/variables.scss

@@ -1,3 +1,12 @@
 // Typography
 $size-7: 0.875rem;
 $size-8: 0.75rem;
+$body-line-height: 1.34;
+$body-color: hsl(0, 100%, 0%);
+
+// Section
+$section-padding-desktop: 0 0 0.5rem;
+$section-padding: 1rem 1.5rem 3rem;
+
+// Tag
+$tag-radius: 16px;