Initial React App

2019-12-24 17:11:46 +03:00 · 2019-12-24 17:11:46 +03:00 · 0dc6b07ca7
commit 0dc6b07ca7
parent 59b1e29f01
40 changed files with 16014 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+.pnp
+.pnp.js
+
+# testing
+coverage
+
+# production
+build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@ -0,0 +1,53 @@
+{
+  "name": "kafka-ui",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
+    "@types/classnames": "^2.2.9",
+    "@types/jest": "^24.0.0",
+    "@types/node": "^12.0.0",
+    "@types/react": "^16.9.0",
+    "@types/react-dom": "^16.9.0",
+    "@types/react-redux": "^7.1.5",
+    "@types/react-router-dom": "^5.1.3",
+    "@types/redux": "^3.6.0",
+    "@types/redux-thunk": "^2.1.0",
+    "bulma": "^0.8.0",
+    "classnames": "^2.2.6",
+    "node-sass": "^4.13.0",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "react-redux": "^7.1.3",
+    "react-router-dom": "^5.1.2",
+    "react-scripts": "3.3.0",
+    "redux": "^4.0.4",
+    "redux-thunk": "^2.3.0",
+    "reselect": "^4.0.0",
+    "typesafe-actions": "^5.1.0",
+    "typescript": "~3.7.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
--- a/frontend/public/favicon.ico
+++ b/frontend/public/favicon.ico
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <script defer src="https://use.fontawesome.com/releases/v5.12.0/js/all.js"></script>
+    <title>Kafka UI</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>
--- a/frontend/public/manifest.json
+++ b/frontend/public/manifest.json
@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
--- a/frontend/public/robots.txt
+++ b/frontend/public/robots.txt
@ -0,0 +1,2 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
--- a/frontend/src/components/App.scss
+++ b/frontend/src/components/App.scss
@ -0,0 +1,92 @@
+$navbar-width: 64px;
+
+.Layout {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  overflow: hidden;
+  position: relative;
+  background-color: #F7F7F7;
+
+  &__navbar {
+    display: flex;
+    z-index: 4;
+    flex-direction: column;
+    width: $navbar-width;
+    margin-left: 0;
+    background-color: #192d3e;
+    box-shadow: 0 0 0 0 rgba(0,0,0,0.2), 0 0 0 0 rgba(0,0,0,0.12), 0px 2px 7px 0px rgba(0,0,0,0.2);
+    text-align: center;
+
+    &Text {
+      display: none;
+    }
+
+    &--expanded {
+      margin-left: 0;
+      width: 280px;
+      text-align: left;
+
+      .Layout__navbar {
+        &Icon {
+          margin-right: 20px;
+        }
+
+        &Text {
+          display: inline;
+        }
+      }
+    }
+  }
+
+  &__logo {
+    height: 52px;
+    color: #fff;
+    text-align: center;
+    line-height: 52px;
+  }
+
+  &__container {
+    flex: 1 1 auto;
+    overflow: auto;
+    z-index: 2;
+  }
+
+  &__content {
+    margin-top: 52px;
+  }
+
+  &__header {
+    position: fixed;
+    top: 0;
+    background-color: #F7F7F7;
+    width: 100%;
+    z-index: 3;
+    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    box-shadow: 0 0 0 0 rgba(0,0,0,0.2), 0px 3px 5px 0px rgba(0,0,0,0.1), 0 0 0 0 rgba(0,0,0,0.12);
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  .Layout__navbar {
+    margin-left: -$navbar-width;
+
+    &--expanded {
+      margin-left: 0;
+    }
+  }
+}
+
+@media screen and (max-width: 800px) {
+  .Layout__navbar {
+    margin-left: -$navbar-width;
+
+    &--expanded {
+      margin-left: 0;
+      position: fixed;
+      top: 52px;
+      left: 0;
+      bottom: 0;
+    }
+  }
+}
--- a/frontend/src/components/App.tsx
+++ b/frontend/src/components/App.tsx
@ -0,0 +1,64 @@
+import React from 'react';
+import {
+  Switch,
+  Route,
+  NavLink,
+} from 'react-router-dom';
+import './App.scss';
+import TopicsContainer from './Topics/TopicsContainer';
+
+const App: React.FC = () => {
+  const [expandedNavbar, setExpandedNavbar] = React.useState<boolean>(false);
+  const toggleNavbar = () => setExpandedNavbar(!expandedNavbar);
+
+  return (
+    <div className="Layout">
+      <aside className={`Layout__navbar ${expandedNavbar && 'Layout__navbar--expanded'}`}>
+        <header className="Layout__logo">
+          Kafka UI
+        </header>
+        <div className="menu">
+          <ul className="menu-list">
+            <li>
+              <NavLink exact to="/" activeClassName="is-active">
+                <i className="fas fa-tachometer-alt Layout__navbarIcon"></i>
+                <span className="Layout__navbarText">
+                  Dashboard
+                </span>
+              </NavLink>
+            </li>
+            <li>
+              <NavLink to="/topics" activeClassName="is-active">
+                <i className="fas fa-stream Layout__navbarIcon"></i>
+                <span className="Layout__navbarText">
+                  Topics
+                </span>
+              </NavLink>
+            </li>
+          </ul>
+        </div>
+      </aside>
+      <main className="Layout__container">
+        <nav className="Layout__header navbar">
+          <div className="navbar-item">
+            <a title="Collapse" href="#" onClick={toggleNavbar}>
+              <span className="icon">
+                <i className="icon fas fa-bars"></i>
+              </span>
+            </a>
+          </div>
+        </nav>
+        <div className="Layout__content">
+          <Switch>
+            <Route path="/topics" component={TopicsContainer} />
+            <Route exact path="/">
+              Dashboard
+            </Route>
+          </Switch>
+        </div>
+      </main>
+    </div>
+  );
+}
+
+export default App;
--- a/frontend/src/components/Topics/Details/ConfigRow.tsx
+++ b/frontend/src/components/Topics/Details/ConfigRow.tsx
@ -0,0 +1,13 @@
+import React from 'react';
+
+const ConfigRow: React.FC<{name: string, value: string}> = ({
+  name,
+  value,
+}) => (
+  <tr>
+    <td>{name}</td>
+    <td>{value}</td>
+  </tr>
+);
+
+export default ConfigRow;
--- a/frontend/src/components/Topics/Details/Details.tsx
+++ b/frontend/src/components/Topics/Details/Details.tsx
@ -0,0 +1,66 @@
+import React from 'react';
+import { Topic } from 'types';
+import ConfigRow from './ConfigRow';
+import Partition from './Partition';
+import { NavLink } from 'react-router-dom';
+
+const Details: React.FC<{ topic: Topic }> = ({
+  topic: {
+    name,
+    configs,
+    partitions,
+  }
+}) => {
+  const configKeys = Object.keys(configs);
+
+  return (
+    <>
+      <section className="hero is-info is-bold">
+        <div className="hero-body">
+          <div className="level has-text-white">
+            <div className="level-item level-left">
+              <div>
+                <p className="heading">Name</p>
+                <p className="title has-text-white">{name}</p>
+              </div>
+            </div>
+            <div className="level-item level-left  has-text-centered ">
+              <div>
+                <p className="heading">Partitions</p>
+                <p className="title has-text-white">{partitions.length}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className="container is-fluid">
+        <div className="tile is-parent">
+
+          <div className="tile is-parent is-7 is-vertical is-narrow">
+            {partitions.map((partition) => <Partition {...partition} />)}
+          </div>
+
+          <div className="tile is-parent">
+            <div className="tile is-child box">
+              <h2 className="title is-5">Config</h2>
+              <table className="table is-striped is-fullwidth">
+                <thead>
+                  <tr>
+                    <th>Key</th>
+                    <th>Value</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {configKeys.map((key) => <ConfigRow name={key} key={key} value={configs[key]} />)}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
+
+export default Details;
--- a/frontend/src/components/Topics/Details/DetailsContainer.ts
+++ b/frontend/src/components/Topics/Details/DetailsContainer.ts
@ -0,0 +1,26 @@
+import { connect } from 'react-redux';
+import {
+  fetchTopicList,
+} from 'redux/reducers/topics/thunks';
+import Details from './Details';
+import { RootState } from 'types';
+import { getTopicByName } from 'redux/reducers/topics/selectors';
+import { withRouter, RouteComponentProps } from 'react-router-dom';
+
+interface RouteProps {
+  topicName: string;
+}
+
+interface OwnProps extends RouteComponentProps<RouteProps> { }
+
+const mapStateToProps = (state: RootState, { match: { params: { topicName } } }: OwnProps) => ({
+  topic: getTopicByName(state, topicName),
+});
+
+const mapDispatchToProps = {
+  fetchTopicList,
+}
+
+export default withRouter(
+  connect(mapStateToProps, mapDispatchToProps)(Details)
+);
--- a/frontend/src/components/Topics/Details/Partition.tsx
+++ b/frontend/src/components/Topics/Details/Partition.tsx
@ -0,0 +1,22 @@
+import React from 'react';
+import { TopicPartition } from 'types';
+import Replica from './Replica';
+
+const Partition: React.FC<TopicPartition> = ({
+  partition,
+  leader,
+  replicas,
+}) => {
+  return (
+    <div className="tile is-child box">
+      <h2 className="title is-5">Partition #{partition}</h2>
+
+      <div className="columns is-mobile is-multiline">
+        {replicas.map((replica, index) => <Replica {...replica} index={index} />)}
+      </div>
+
+    </div>
+  );
+};
+
+export default Partition;
--- a/frontend/src/components/Topics/Details/Replica.tsx
+++ b/frontend/src/components/Topics/Details/Replica.tsx
@ -0,0 +1,34 @@
+import React from 'react';
+import { TopicReplica } from 'types';
+import cx from 'classnames';
+
+interface Props extends TopicReplica {
+  index: number;
+}
+
+const Replica: React.FC<Props> = ({
+  in_sync,
+  leader,
+  broker,
+  index,
+}) => {
+  return (
+    <div className="column is-narrow">
+      <div className={cx('notification', leader ? 'is-warning' : 'is-light')}>
+        <div className="title is-6">Replica #{index}</div>
+        <div className="tags">
+          {leader && (
+            <span className="tag">
+              LEADER
+            </span>
+          )}
+          <span className={cx('tag', in_sync ? 'is-success' : 'is-danger')}>
+            {in_sync ? 'IN SYNC' : 'OUT OF SYNC'}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Replica;
--- a/frontend/src/components/Topics/List/List.tsx
+++ b/frontend/src/components/Topics/List/List.tsx
@ -0,0 +1,59 @@
+import React from 'react';
+import { Topic } from 'types';
+import { NavLink } from 'react-router-dom';
+
+const ListItem: React.FC<Topic> = ({
+  name,
+  partitions,
+}) => {
+  return (
+    <li className="tile is-child box">
+      <NavLink exact to={`/topics/${name}`} activeClassName="is-active" className="title is-6">
+        {name} <i className="fas fa-arrow-circle-right has-text-link"></i>
+      </NavLink>
+      <p>Partitions: {partitions.length}</p>
+      <p>Replications: {partitions ? partitions[0].replicas.length : 0}</p>
+    </li>
+  );
+}
+
+interface Props {
+  topics: Topic[];
+  totalBrokers?: number;
+}
+
+const List: React.FC<Props> = ({
+  topics,
+  totalBrokers,
+}) => {
+  return (
+    <>
+      <section className="hero is-info is-bold">
+        <div className="hero-body">
+          <div className="level has-text-white is-mobile">
+            <div className="level-item has-text-centered ">
+              <div>
+                <p className="heading">Brokers</p>
+                <p className="title has-text-white">{totalBrokers}</p>
+              </div>
+            </div>
+            <div className="level-item has-text-centered">
+              <div>
+                <p className="heading">Topics</p>
+                <p className="title has-text-white">{topics.length}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <div className="container is-fluid">
+        <ul className="tile is-parent is-vertical">
+          {topics.map((topic) => <ListItem {...topic} key={topic.name} />)}
+        </ul>
+      </div>
+    </>
+  );
+}
+
+export default List;
--- a/frontend/src/components/Topics/List/ListContainer.ts
+++ b/frontend/src/components/Topics/List/ListContainer.ts
@ -0,0 +1,15 @@
+import { connect } from 'react-redux';
+import {
+  getTopicList,
+  getTotalBrokers,
+} from 'redux/reducers/topics/selectors';
+import { RootState } from 'types';
+
+import List from './List';
+
+const mapStateToProps = (state: RootState) => ({
+  topics: getTopicList(state),
+  totalBrokers: getTotalBrokers(state),
+});
+
+export default connect(mapStateToProps)(List);
--- a/frontend/src/components/Topics/Topics.tsx
+++ b/frontend/src/components/Topics/Topics.tsx
@ -0,0 +1,36 @@
+import React from 'react';
+import {
+  Switch,
+  Route,
+} from 'react-router-dom';
+import ListContainer from './List/ListContainer';
+import DetailsContainer from './Details/DetailsContainer';
+import PageLoader from 'components/common/PageLoader/PageLoader';
+
+interface Props {
+  isFetched: boolean;
+  fetchBrokers: () => void;
+  fetchTopicList: () => void;
+}
+
+const Topics: React.FC<Props> = ({
+  isFetched,
+  fetchBrokers,
+  fetchTopicList,
+}) => {
+  React.useEffect(() => { fetchTopicList(); }, [fetchTopicList]);
+  React.useEffect(() => { fetchBrokers(); }, [fetchBrokers]);
+
+  if (isFetched) {
+    return (
+      <Switch>
+        <Route exact path="/topics/:topicName" component={DetailsContainer} />
+        <Route exact path="/topics" component={ListContainer} />
+      </Switch>
+    );
+  }
+
+  return (<PageLoader />);
+}
+
+export default Topics;
--- a/frontend/src/components/Topics/TopicsContainer.ts
+++ b/frontend/src/components/Topics/TopicsContainer.ts
@ -0,0 +1,19 @@
+import { connect } from 'react-redux';
+import {
+  fetchTopicList,
+  fetchBrokers,
+} from 'redux/reducers/topics/thunks';
+import Topics from './Topics';
+import { getIsTopicListFetched } from 'redux/reducers/topics/selectors';
+import { RootState } from 'types';
+
+const mapStateToProps = (state: RootState) => ({
+  isFetched: getIsTopicListFetched(state),
+});
+
+const mapDispatchToProps = {
+  fetchTopicList,
+  fetchBrokers,
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Topics);
--- a/frontend/src/components/common/PageLoader/PageLoader.tsx
+++ b/frontend/src/components/common/PageLoader/PageLoader.tsx
@ -0,0 +1,17 @@
+import React from 'react';
+
+const PageLoader: React.FC = () => (
+  <section className="hero is-fullheight-with-navbar">
+    <div className="hero-body has-text-centered" style={{ justifyContent: 'center' }}>
+      <div style={{ width: 300 }}>
+        <div className="subtitle">Loading...</div>
+        <progress
+          className="progress is-small is-primary is-inline-block"
+          max="100"
+        />
+      </div>
+    </div>
+  </section>
+);
+
+export default PageLoader;
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@ -0,0 +1,25 @@
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import './theme/index.scss';
+import App from './components/App';
+import * as serviceWorker from './serviceWorker';
+import configureStore from './redux/store/configureStore';
+
+const store = configureStore();
+
+ReactDOM.render(
+  <Provider store={store}>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </Provider>,
+  document.getElementById('root'),
+);
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.unregister();
--- a/frontend/src/lib/api/index.ts
+++ b/frontend/src/lib/api/index.ts
@ -0,0 +1 @@
+export * from './topics';
--- a/frontend/src/lib/api/topics.ts
+++ b/frontend/src/lib/api/topics.ts
@ -0,0 +1,28 @@
+import {
+  TopicName,
+  Topic,
+  Broker,
+} from 'types';
+
+const BASE_PARAMS: RequestInit = {
+  credentials: 'include',
+  mode: 'cors',
+  headers: {
+    'Content-Type': 'application/json',
+    'Accept': 'application/vnd.kafka.v2+json',
+  },
+};
+
+const BASE_URL = 'http://localhost:8082';
+
+export const getTopic = (name: TopicName): Promise<Topic> =>
+  fetch(`${BASE_URL}/topics/${name}`, { ...BASE_PARAMS })
+    .then(res => res.json());
+
+export const getTopics = (): Promise<TopicName[]> =>
+  fetch(`${BASE_URL}/topics`, { ...BASE_PARAMS })
+    .then(res => res.json());
+
+export const getBrokers = (): Promise<{ brokers: Broker[] }> =>
+  fetch(`${BASE_URL}/brokers`, { ...BASE_PARAMS })
+    .then(res => res.json());
--- a/frontend/src/react-app-env.d.ts
+++ b/frontend/src/react-app-env.d.ts
@ -0,0 +1 @@
+/// <reference types="react-scripts" />
--- a/frontend/src/redux/reducers/actionType.ts
+++ b/frontend/src/redux/reducers/actionType.ts
@ -0,0 +1,3 @@
+import topicsActionType from './topics/actionType';
+
+export default { ...topicsActionType };
--- a/frontend/src/redux/reducers/index.ts
+++ b/frontend/src/redux/reducers/index.ts
@ -0,0 +1,7 @@
+import { combineReducers } from 'redux';
+import topics from './topics/reducer';
+import { RootState } from 'types';
+
+export default combineReducers<RootState>({
+  topics,
+});
--- a/frontend/src/redux/reducers/topics/actionType.ts
+++ b/frontend/src/redux/reducers/topics/actionType.ts
@ -0,0 +1,11 @@
+enum ActionType {
+  TOPICS__FETCH_REQUEST = 'TOPICS__FETCH_REQUEST',
+  TOPICS__FETCH_SUCCESS = 'TOPICS__FETCH_SUCCESS',
+  TOPICS__FETCH_FAILURE = 'TOPICS__FETCH_FAILURE',
+
+  BROKERS__FETCH_REQUEST = 'BROKERS__FETCH_REQUEST',
+  BROKERS__FETCH_SUCCESS = 'BROKERS__FETCH_SUCCESS',
+  BROKERS__FETCH_FAILURE = 'BROKERS__FETCH_FAILURE',
+}
+
+export default ActionType;
--- a/frontend/src/redux/reducers/topics/actions.ts
+++ b/frontend/src/redux/reducers/topics/actions.ts
@ -0,0 +1,15 @@
+import { createAsyncAction} from 'typesafe-actions';
+import ActionType from './actionType';
+import { Topic, Broker } from 'types';
+
+export const fetchTopicListAction = createAsyncAction(
+  ActionType.TOPICS__FETCH_REQUEST,
+  ActionType.TOPICS__FETCH_SUCCESS,
+  ActionType.TOPICS__FETCH_FAILURE,
+)<undefined, Topic[], undefined>();
+
+export const fetchBrokersAction = createAsyncAction(
+  ActionType.BROKERS__FETCH_REQUEST,
+  ActionType.BROKERS__FETCH_SUCCESS,
+  ActionType.BROKERS__FETCH_FAILURE,
+)<undefined, Broker[], undefined>();
--- a/frontend/src/redux/reducers/topics/reducer.ts
+++ b/frontend/src/redux/reducers/topics/reducer.ts
@ -0,0 +1,49 @@
+import { TopicsState, FetchStatus, Action } from 'types';
+import actionType from 'redux/reducers/actionType';
+
+export const initialState: TopicsState = {
+  fetchStatus: FetchStatus.notFetched,
+  items: [],
+  brokers: undefined,
+};
+
+const reducer = (state = initialState, action: Action): TopicsState => {
+  switch (action.type) {
+    case actionType.TOPICS__FETCH_REQUEST:
+      return {
+        ...state,
+        fetchStatus: FetchStatus.fetching,
+      };
+    case actionType.TOPICS__FETCH_SUCCESS:
+      return {
+        ...state,
+        fetchStatus: FetchStatus.fetched,
+        items: action.payload,
+      };
+    case actionType.TOPICS__FETCH_FAILURE:
+      return {
+        ...state,
+        fetchStatus: FetchStatus.errorFetching,
+      };
+
+    case actionType.BROKERS__FETCH_REQUEST:
+      return {
+        ...state,
+        brokers: undefined,
+      };
+    case actionType.BROKERS__FETCH_SUCCESS:
+      return {
+        ...state,
+        brokers: action.payload,
+      };
+    case actionType.BROKERS__FETCH_FAILURE:
+      return {
+        ...state,
+        brokers: undefined,
+      };
+    default:
+      return state;
+  }
+};
+
+export default reducer;
--- a/frontend/src/redux/reducers/topics/selectors.ts
+++ b/frontend/src/redux/reducers/topics/selectors.ts
@ -0,0 +1,34 @@
+import { createSelector } from 'reselect';
+import { TopicsState, RootState, Topic, TopicName, FetchStatus } from 'types';
+
+const topicsState = ({ topics }: RootState): TopicsState => topics;
+
+export const getIsTopicListFetched = createSelector(topicsState, ({ fetchStatus }) => fetchStatus === FetchStatus.fetched);
+
+export const getTopicList = createSelector(topicsState, ({ items }) => items);
+
+export const getTotalBrokers = createSelector(
+  topicsState,
+  ({ brokers }) => (brokers !== undefined ? brokers.length : undefined),
+);
+
+interface TopicMap {[key: string]: Topic};
+
+export const getTopicMap = createSelector(
+  getTopicList,
+  (topics) => topics.reduce<TopicMap>(
+    (memo: TopicMap, topic: Topic): TopicMap => ({
+      ...memo,
+      [topic.name]: { ...topic },
+    }),
+    {},
+  )
+);
+
+const getTopicName = (_: RootState, topicName: TopicName) => topicName;
+
+export const getTopicByName = createSelector(
+  getTopicMap,
+  getTopicName,
+  (topics: TopicMap, topicName: TopicName) => topics[topicName],
+);
--- a/frontend/src/redux/reducers/topics/thunks.ts
+++ b/frontend/src/redux/reducers/topics/thunks.ts
@ -0,0 +1,34 @@
+import {
+  getTopics,
+  getTopic,
+  getBrokers,
+} from 'lib/api';
+import {
+  fetchTopicListAction,
+  fetchBrokersAction,
+} from './actions';
+import { Topic, TopicName, PromiseThunk } from 'types';
+
+
+export const fetchTopicList = (): PromiseThunk<void> => async (dispatch, getState) => {
+  dispatch(fetchTopicListAction.request());
+
+  try {
+    const topics = await getTopics();
+    const detailedList = await Promise.all(topics.map((topic: TopicName): Promise<Topic> => getTopic(topic)));
+
+    dispatch(fetchTopicListAction.success(detailedList));
+  } catch (e) {
+    dispatch(fetchTopicListAction.failure());
+  }
+}
+
+export const fetchBrokers = (): PromiseThunk<void> => async (dispatch, getState) => {
+  dispatch(fetchBrokersAction.request());
+  try {
+    const { brokers } = await getBrokers();
+    dispatch(fetchBrokersAction.success(brokers));
+  } catch (e) {
+    dispatch(fetchBrokersAction.failure());
+  }
+}
--- a/frontend/src/redux/store/configureStore/dev.ts
+++ b/frontend/src/redux/store/configureStore/dev.ts
@ -0,0 +1,17 @@
+import { createStore, applyMiddleware, compose } from 'redux';
+import thunk from 'redux-thunk';
+import rootReducer from '../../reducers';
+
+export default () => {
+  const middlewares = [thunk];
+
+  const composeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+
+  const enhancer = composeEnhancers(
+    applyMiddleware(...middlewares),
+  );
+
+  const store = createStore(rootReducer, undefined, enhancer);
+
+  return store
+};
--- a/frontend/src/redux/store/configureStore/index.ts
+++ b/frontend/src/redux/store/configureStore/index.ts
@ -0,0 +1,6 @@
+import devConfigureStore from './dev';
+import prodConfigureStore from './prod';
+
+const configureStore = (process.env.NODE_ENV === 'production') ? prodConfigureStore : devConfigureStore
+
+export default configureStore;
--- a/frontend/src/redux/store/configureStore/prod.ts
+++ b/frontend/src/redux/store/configureStore/prod.ts
@ -0,0 +1,13 @@
+import { createStore, applyMiddleware } from 'redux';
+import thunk from 'redux-thunk';
+import rootReducer from '../../reducers';
+
+export default () => {
+  const middlewares = [thunk]
+
+  const enhancer = applyMiddleware(...middlewares);
+
+  const store = createStore(rootReducer, undefined, enhancer);
+
+  return store
+};
--- a/frontend/src/serviceWorker.ts
+++ b/frontend/src/serviceWorker.ts
@ -0,0 +1,145 @@
+// This optional code is used to register a service worker.
+// register() is not called by default.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read https://bit.ly/CRA-PWA
+
+const isLocalhost = Boolean(
+  window.location.hostname === 'localhost' ||
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === '[::1]' ||
+    // 127.0.0.0/8 are considered localhost for IPv4.
+    window.location.hostname.match(
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+    )
+);
+
+type Config = {
+  onSuccess?: (registration: ServiceWorkerRegistration) => void;
+  onUpdate?: (registration: ServiceWorkerRegistration) => void;
+};
+
+export function register(config?: Config) {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    // The URL constructor is available in all browsers that support SW.
+    const publicUrl = new URL(
+      process.env.PUBLIC_URL,
+      window.location.href
+    );
+    if (publicUrl.origin !== window.location.origin) {
+      // Our service worker won't work if PUBLIC_URL is on a different origin
+      // from what our page is served on. This might happen if a CDN is used to
+      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+      return;
+    }
+
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+      if (isLocalhost) {
+        // This is running on localhost. Let's check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl, config);
+
+        // Add some additional logging to localhost, pointing developers to the
+        // service worker/PWA documentation.
+        navigator.serviceWorker.ready.then(() => {
+          console.log(
+            'This web app is being served cache-first by a service ' +
+              'worker. To learn more, visit https://bit.ly/CRA-PWA'
+          );
+        });
+      } else {
+        // Is not localhost. Just register service worker
+        registerValidSW(swUrl, config);
+      }
+    });
+  }
+}
+
+function registerValidSW(swUrl: string, config?: Config) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then(registration => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing;
+        if (installingWorker == null) {
+          return;
+        }
+        installingWorker.onstatechange = () => {
+          if (installingWorker.state === 'installed') {
+            if (navigator.serviceWorker.controller) {
+              // At this point, the updated precached content has been fetched,
+              // but the previous service worker will still serve the older
+              // content until all client tabs are closed.
+              console.log(
+                'New content is available and will be used when all ' +
+                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
+              );
+
+              // Execute callback
+              if (config && config.onUpdate) {
+                config.onUpdate(registration);
+              }
+            } else {
+              // At this point, everything has been precached.
+              // It's the perfect time to display a
+              // "Content is cached for offline use." message.
+              console.log('Content is cached for offline use.');
+
+              // Execute callback
+              if (config && config.onSuccess) {
+                config.onSuccess(registration);
+              }
+            }
+          }
+        };
+      };
+    })
+    .catch(error => {
+      console.error('Error during service worker registration:', error);
+    });
+}
+
+function checkValidServiceWorker(swUrl: string, config?: Config) {
+  // Check if the service worker can be found. If it can't reload the page.
+  fetch(swUrl, {
+    headers: { 'Service-Worker': 'script' }
+  })
+    .then(response => {
+      // Ensure service worker exists, and that we really are getting a JS file.
+      const contentType = response.headers.get('content-type');
+      if (
+        response.status === 404 ||
+        (contentType != null && contentType.indexOf('javascript') === -1)
+      ) {
+        // No service worker found. Probably a different app. Reload the page.
+        navigator.serviceWorker.ready.then(registration => {
+          registration.unregister().then(() => {
+            window.location.reload();
+          });
+        });
+      } else {
+        // Service worker found. Proceed as normal.
+        registerValidSW(swUrl, config);
+      }
+    })
+    .catch(() => {
+      console.log(
+        'No internet connection found. App is running in offline mode.'
+      );
+    });
+}
+
+export function unregister() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready.then(registration => {
+      registration.unregister();
+    });
+  }
+}
--- a/frontend/src/setupTests.ts
+++ b/frontend/src/setupTests.ts
@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect';
--- a/frontend/src/theme/bulma_overrides.scss
+++ b/frontend/src/theme/bulma_overrides.scss
@ -0,0 +1,16 @@
+@import "../../node_modules/bulma/sass/utilities/_all.sass";
+
+$menu-item-color: $white;
+$menu-item-radius: 0;
+$menu-item-hover-color: $white;
+$menu-item-hover-background-color: transparent;
+$menu-item-active-color: $text-strong;
+$menu-item-active-background-color: $background;
+$menu-list-border-left: 1px solid $border-light;
+
+@import "../../node_modules/bulma/sass/base/_all.sass";
+@import "../../node_modules/bulma/sass/elements/_all.sass";
+@import "../../node_modules/bulma/sass/form/_all.sass";
+@import "../../node_modules/bulma/sass/components/_all.sass";
+@import "../../node_modules/bulma/sass/grid/_all.sass";
+@import "../../node_modules/bulma/sass/layout/_all.sass";
--- a/frontend/src/theme/index.scss
+++ b/frontend/src/theme/index.scss
@ -0,0 +1,19 @@
+@import './bulma_overrides.scss';
+
+#root, body, html {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@ -0,0 +1,21 @@
+import { ActionType } from 'typesafe-actions';
+import * as topicsActions from 'redux/reducers/topics/actions';
+import { ThunkAction } from 'redux-thunk';
+import { TopicsState } from './topic';
+import { AnyAction } from 'redux';
+export * from './topic';
+
+export enum FetchStatus {
+  notFetched = 'notFetched',
+  fetching = 'fetching',
+  fetched = 'fetched',
+  errorFetching = 'errorFetching',
+}
+
+export interface RootState {
+  topics: TopicsState;
+}
+
+export type Action = ActionType<typeof topicsActions>;
+
+export type PromiseThunk<T> = ThunkAction<Promise<T>, RootState, undefined, AnyAction>;
--- a/frontend/src/types/topic.ts
+++ b/frontend/src/types/topic.ts
@ -0,0 +1,32 @@
+import { FetchStatus } from 'types';
+
+export type TopicName = string;
+export interface TopicConfigs {
+  [key: string]: string;
+}
+
+export interface TopicReplica {
+  broker: number;
+  leader: boolean;
+  in_sync: true;
+}
+
+export interface TopicPartition {
+  partition: number;
+  leader: number;
+  replicas: TopicReplica[];
+}
+
+export interface Topic {
+  name: TopicName;
+  configs: TopicConfigs;
+  partitions: TopicPartition[];
+}
+
+export interface TopicsState {
+  fetchStatus: FetchStatus;
+  items: Topic[];
+  brokers?: Broker[];
+}
+
+export type Broker = number;
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react",
+    "baseUrl": "src"
+  },
+  "include": [
+    "src"
+  ]
+}