0ct0pu5/kafka-ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Initial React App

Browse source
This commit is contained in:
Oleg Shuralev 2019-12-24 17:11:46 +03:00
parent 59b1e29f01
commit 0dc6b07ca7
No known key found for this signature in database
GPG key ID: 0459DF80E1A2FD1B
40 changed files with 16014 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
.gitignore vendored Normal file
View file

@ -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*

14934
frontend/package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

53
frontend/package.json Normal file
View file

@ -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"
]
}
}

BIN
frontend/public/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.8 KiB

16
frontend/public/index.html Normal file
View file

@ -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>

15
frontend/public/manifest.json Normal file
View file

@ -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"
}

2
frontend/public/robots.txt Normal file
View file

@ -0,0 +1,2 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *

92
frontend/src/components/App.scss Normal file
View file

@ -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;
}
}
}

64
frontend/src/components/App.tsx Normal file
View file

@ -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;

13
frontend/src/components/Topics/Details/ConfigRow.tsx Normal file
View file

@ -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;

66
frontend/src/components/Topics/Details/Details.tsx Normal file
View file

@ -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;

26
frontend/src/components/Topics/Details/DetailsContainer.ts Normal file
View file

@ -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)
);

22
frontend/src/components/Topics/Details/Partition.tsx Normal file
View file

@ -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;

34
frontend/src/components/Topics/Details/Replica.tsx Normal file
View file

@ -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;

59
frontend/src/components/Topics/List/List.tsx Normal file
View file

@ -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;

15
frontend/src/components/Topics/List/ListContainer.ts Normal file
View file

@ -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);

36
frontend/src/components/Topics/Topics.tsx Normal file
View file

@ -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;

19
frontend/src/components/Topics/TopicsContainer.ts Normal file
View file

@ -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);

17
frontend/src/components/common/PageLoader/PageLoader.tsx Normal file
View file

@ -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;

25
frontend/src/index.tsx Normal file
View file

@ -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();

1
frontend/src/lib/api/index.ts Normal file
View file

@ -0,0 +1 @@
export * from './topics';

28
frontend/src/lib/api/topics.ts Normal file
View file

@ -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());

1
frontend/src/react-app-env.d.ts vendored Normal file
View file

@ -0,0 +1 @@
/// <reference types="react-scripts" />

3
frontend/src/redux/reducers/actionType.ts Normal file
View file

@ -0,0 +1,3 @@
import topicsActionType from './topics/actionType';
export default { ...topicsActionType };

7
frontend/src/redux/reducers/index.ts Normal file
View file

@ -0,0 +1,7 @@
import { combineReducers } from 'redux';
import topics from './topics/reducer';
import { RootState } from 'types';
export default combineReducers<RootState>({
topics,
});

11
frontend/src/redux/reducers/topics/actionType.ts Normal file
View file

@ -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;

15
frontend/src/redux/reducers/topics/actions.ts Normal file
View file

@ -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>();

49
frontend/src/redux/reducers/topics/reducer.ts Normal file
View file

@ -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;

34
frontend/src/redux/reducers/topics/selectors.ts Normal file
View file

@ -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],
);

34
frontend/src/redux/reducers/topics/thunks.ts Normal file
View file

@ -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());
}
}

17
frontend/src/redux/store/configureStore/dev.ts Normal file
View file

@ -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
};

6
frontend/src/redux/store/configureStore/index.ts Normal file
View file

@ -0,0 +1,6 @@
import devConfigureStore from './dev';
import prodConfigureStore from './prod';
const configureStore = (process.env.NODE_ENV === 'production') ? prodConfigureStore : devConfigureStore
export default configureStore;

13
frontend/src/redux/store/configureStore/prod.ts Normal file
View file

@ -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
};

145
frontend/src/serviceWorker.ts Normal file
View file

@ -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();
});
}
}

5
frontend/src/setupTests.ts Normal file
View file

@ -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';

16
frontend/src/theme/bulma_overrides.scss Normal file
View file

@ -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";

19
frontend/src/theme/index.scss Normal file
View file

@ -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;
}

21
frontend/src/types/index.ts Normal file
View file

@ -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>;

32
frontend/src/types/topic.ts Normal file
View file

@ -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;

26
frontend/tsconfig.json Normal file
View file

@ -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"
]
}