[UI] Breadcrumb

frontend/src/components/Brokers/Brokers.tsx

@@ -5,6 +5,7 @@ import formatBytes from 'lib/utils/formatBytes';
 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';
 
 interface Props extends BrokerMetrics {
   clusterId: string;
@@ -49,7 +50,7 @@ const Topics: React.FC<Props> = ({
 
   return (
     <div className="section">
-      <h1 className="title is-5">Brokers overview</h1>
+      <Breadcrumb>Brokers overview</Breadcrumb>
 
       <MetricsWrapper title="Uptime">
         <Indicator title="Total Brokers">
@@ -94,7 +95,7 @@ const Topics: React.FC<Props> = ({
         </Indicator>
         <Indicator title="Min usage">
           {minDiskUsageValue}
-          <span className="subtitle has-text-weight-light"> {minDiskUsageValue}</span>
+          <span className="subtitle has-text-weight-light"> {minDiskUsageSize}</span>
         </Indicator>
         <Indicator title="Distribution">
           <span className="is-capitalized">

frontend/src/components/Topics/Details/Details.tsx

@@ -1,19 +1,35 @@
 import React from 'react';
+import { ClusterId, Topic } from 'types';
+import MetricsWrapper from 'components/common/Dashboard/MetricsWrapper';
+import Indicator from 'components/common/Dashboard/Indicator';
+import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
 
-const Details: React.FC = ({
+interface Props extends Topic {
+  clusterId: ClusterId;
+}
+
+const Details: React.FC<Props> = ({
+  clusterId,
+  name,
+  partitions,
+  internal,
 }) => {
   return (
     <div className="section">
-      <div className="tabs">
-        <ul>
-          <li className="is-active">
-            <a>Pictures</a>
-          </li>
-          <li><a>Music</a></li>
-          <li><a>Videos</a></li>
-          <li><a>Documents</a></li>
-        </ul>
-      </div>
+      <Breadcrumb links={[
+        { href: `/clusters/${clusterId}/topics`, label: 'All Topics' },
+      ]}>
+        {name}
+      </Breadcrumb>
+
+      <MetricsWrapper title="Partitions">
+        <Indicator title="Under replicated partitions">
+          0
+        </Indicator>
+        <Indicator title="Out of sync replicas">
+          0
+        </Indicator>
+      </MetricsWrapper>
     </div>
   );
 }

frontend/src/components/Topics/Details/DetailsContainer.ts

@@ -8,13 +8,15 @@ import { getTopicByName } from 'redux/reducers/topics/selectors';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 
 interface RouteProps {
+  clusterId: string;
   topicName: string;
 }
 
 interface OwnProps extends RouteComponentProps<RouteProps> { }
 
-const mapStateToProps = (state: RootState, { match: { params: { topicName } } }: OwnProps) => ({
-  topic: getTopicByName(state, topicName),
+const mapStateToProps = (state: RootState, { match: { params: { topicName, clusterId } } }: OwnProps) => ({
+  clusterId,
+  ...getTopicByName(state, topicName),
 });
 
 const mapDispatchToProps = {

frontend/src/components/Topics/List/List.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Topic } from 'types';
 import ListItem from './ListItem';
+import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
 
 interface Props {
   topics: Topic[];
@@ -19,6 +20,8 @@ const List: React.FC<Props> = ({
 
   return (
     <div className="section">
+      <Breadcrumb>All Topics</Breadcrumb>
+
       <div className="box">
         <div className="field">
           <input

frontend/src/components/common/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+
+interface Link {
+  label: string;
+  href: string;
+}
+
+interface Props {
+  links?: Link[];
+}
+
+const Breadcrumb: React.FC<Props> = ({
+  links,
+  children,
+}) => {
+  return (
+    <nav className="breadcrumb" aria-label="breadcrumbs">
+      <ul>
+        {links && links.map(({ label, href }) => (
+          <li key={label}>
+            <NavLink to={href}>{label}</NavLink>
+          </li>
+        ))}
+
+        <li className="is-active">
+          <a href="#">{children}</a>
+        </li>
+      </ul>
+    </nav>
+  );
+}
+
+export default Breadcrumb;

frontend/src/redux/reducers/topics/thunks.ts

@@ -4,10 +4,8 @@ import { PromiseThunk, ClusterId } from 'types';
 
 export const fetchTopicList = (clusterId: ClusterId): PromiseThunk<void> => async (dispatch) => {
   dispatch(fetchTopicListAction.request());
-
   try {
     const topics = await getTopics(clusterId);
-
     dispatch(fetchTopicListAction.success(topics));
   } catch (e) {
     dispatch(fetchTopicListAction.failure());