[UI] Cleanup

frontend/src/components/AppContainer.tsx

@@ -4,7 +4,7 @@ import {
 } from 'redux/reducers/clusters/thunks';
 import App from './App';
 import { getIsClusterListFetched } from 'redux/reducers/clusters/selectors';
-import { RootState } from 'types';
+import { RootState } from 'lib/interfaces';
 
 const mapStateToProps = (state: RootState) => ({
   isClusterListFetched: getIsClusterListFetched(state),

frontend/src/components/Brokers/Brokers.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ClusterId, BrokerMetrics, ZooKeeperStatus } from 'types';
+import { ClusterId, BrokerMetrics, ZooKeeperStatus } from 'lib/interfaces';
 import useInterval from 'lib/hooks/useInterval';
 import formatBytes from 'lib/utils/formatBytes';
 import cx from 'classnames';

frontend/src/components/Brokers/BrokersContainer.ts

@@ -5,7 +5,7 @@ import {
 } from 'redux/reducers/brokers/thunks';
 import Brokers from './Brokers';
 import * as brokerSelectors from 'redux/reducers/brokers/selectors';
-import { RootState, ClusterId } from 'types';
+import { RootState, ClusterId } from 'lib/interfaces';
 import { RouteComponentProps } from 'react-router-dom';
 
 interface RouteProps {

frontend/src/components/Nav/ClusterMenu.tsx

@@ -1,5 +1,5 @@
 import React, { CSSProperties } from 'react';
-import { Cluster } from 'types';
+import { Cluster } from 'lib/interfaces';
 import { NavLink } from 'react-router-dom';
 import { clusterBrokersPath, clusterTopicsPath } from 'lib/paths';
 

frontend/src/components/Nav/Nav.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Cluster } from 'types';
+import { Cluster } from 'lib/interfaces';
 import { NavLink } from 'react-router-dom';
 import cx from 'classnames';
 import ClusterMenu from './ClusterMenu';

frontend/src/components/Nav/NavConatiner.ts

@@ -1,7 +1,7 @@
 import { connect } from 'react-redux';
 import Nav from './Nav';
 import { getIsClusterListFetched, getClusterList } from 'redux/reducers/clusters/selectors';
-import { RootState } from 'types';
+import { RootState } from 'lib/interfaces';
 
 const mapStateToProps = (state: RootState) => ({
   isClusterListFetched: getIsClusterListFetched(state),

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ClusterId, Topic, TopicDetails, TopicName } from 'types';
+import { ClusterId, Topic, TopicDetails, TopicName } from 'lib/interfaces';
 import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
 import { NavLink, Switch, Route } from 'react-router-dom';
 import { clusterTopicsPath, clusterTopicSettingsPath, clusterTopicPath, clusterTopicMessagesPath } from 'lib/paths';

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

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 import Details from './Details';
-import { RootState } from 'types';
+import { RootState } from 'lib/interfaces';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 
 interface RouteProps {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ClusterId, TopicName } from 'types';
+import { ClusterId, TopicName } from 'lib/interfaces';
 
 interface Props {
   clusterId: ClusterId;

frontend/src/components/Topics/Details/Messages/MessagesContainer.ts

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 import Messages from './Messages';
-import { RootState } from 'types';
+import { RootState } from 'lib/interfaces';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 
 interface RouteProps {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ClusterId, Topic, TopicDetails, TopicName } from 'types';
+import { ClusterId, Topic, TopicDetails, TopicName } from 'lib/interfaces';
 import MetricsWrapper from 'components/common/Dashboard/MetricsWrapper';
 import Indicator from 'components/common/Dashboard/Indicator';
 

frontend/src/components/Topics/Details/Overview/OverviewContainer.ts

@@ -3,7 +3,7 @@ import {
   fetchTopicDetails,
 } from 'redux/reducers/topics/thunks';
 import Overview from './Overview';
-import { RootState, TopicName, ClusterId } from 'types';
+import { RootState, TopicName, ClusterId } from 'lib/interfaces';
 import { getTopicByName, getIsTopicDetailsFetched } from 'redux/reducers/topics/selectors';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ClusterId, TopicName, TopicConfig } from 'types';
+import { ClusterId, TopicName, TopicConfig } from 'lib/interfaces';
 
 interface Props {
   clusterId: ClusterId;

frontend/src/components/Topics/Details/Settings/SettingsContainer.ts

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { RootState, ClusterId, TopicName } from 'types';
+import { RootState, ClusterId, TopicName } from 'lib/interfaces';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 import {
   fetchTopicConfig,

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TopicWithDetailedInfo, ClusterId } from 'types';
+import { TopicWithDetailedInfo, ClusterId } from 'lib/interfaces';
 import ListItem from './ListItem';
 import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
 import { NavLink } from 'react-router-dom';

frontend/src/components/Topics/List/ListContainer.ts

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { RootState } from 'types';
+import { RootState } from 'lib/interfaces';
 import { getTopicList, getExternalTopicList } from 'redux/reducers/topics/selectors';
 import List from './List';
 import { withRouter, RouteComponentProps } from 'react-router-dom';

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
 import { NavLink } from 'react-router-dom';
-import { TopicWithDetailedInfo } from 'types';
+import { TopicWithDetailedInfo } from 'lib/interfaces';
 
 const ListItem: React.FC<TopicWithDetailedInfo> = ({
   name,

frontend/src/components/Topics/New/New.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ClusterId, CleanupPolicy, TopicFormData, TopicName } from 'types';
+import { ClusterId, CleanupPolicy, TopicFormData, TopicName } from 'lib/interfaces';
 import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
 import { clusterTopicsPath } from 'lib/paths';
 import { useForm, ErrorMessage } from 'react-hook-form';

frontend/src/components/Topics/New/NewContainer.ts

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { RootState, ClusterId, TopicFormData, TopicName, Action } from 'types';
+import { RootState, ClusterId, TopicFormData, TopicName, Action } from 'lib/interfaces';
 import New from './New';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 import { createTopic } from 'redux/reducers/topics/thunks';

frontend/src/components/Topics/Topics.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ClusterId } from 'types';
+import { ClusterId } from 'lib/interfaces';
 import {
   Switch,
   Route,

frontend/src/components/Topics/TopicsContainer.ts

@@ -2,7 +2,7 @@ import { connect } from 'react-redux';
 import { fetchTopicList } from 'redux/reducers/topics/thunks';
 import Topics from './Topics';
 import { getIsTopicListFetched } from 'redux/reducers/topics/selectors';
-import { RootState, ClusterId } from 'types';
+import { RootState, ClusterId } from 'lib/interfaces';
 import { RouteComponentProps } from 'react-router-dom';
 
 interface RouteProps {

frontend/src/lib/api/brokers.ts

@@ -2,7 +2,7 @@ import {
   Broker,
   ClusterId,
   BrokerMetrics,
-} from 'types';
+} from 'lib/interfaces';
 import {
   BASE_URL,
   BASE_PARAMS,

frontend/src/lib/api/clusters.ts

@@ -1,6 +1,6 @@
 import {
   Cluster,
-} from 'types';
+} from 'lib/interfaces';
 import {
   BASE_URL,
   BASE_PARAMS,

frontend/src/lib/api/topics.ts

@@ -5,7 +5,7 @@ import {
   TopicDetails,
   TopicConfig,
   TopicFormData,
-} from 'types';
+} from 'lib/interfaces';
 import {
   BASE_URL,
   BASE_PARAMS,

frontend/src/types/cluster.ts → frontend/src/lib/interfaces/cluster.ts

@@ -13,4 +13,6 @@ export interface Cluster {
   brokerCount: number;
   onlinePartitionCount: number;
   topicCount: number;
+  bytesInPerSec: number;
+  bytesOutPerSec: number;
 }

frontend/src/types/loader.ts → frontend/src/lib/interfaces/loader.ts

@@ -1,4 +1,4 @@
-import { FetchStatus } from "types";
+import { FetchStatus } from 'lib/interfaces';
 
 export interface LoaderState {
   [key: string]: FetchStatus;

frontend/src/lib/paths.ts

@@ -1,4 +1,4 @@
-import { ClusterId, TopicName } from "types";
+import { ClusterId, TopicName } from 'lib/interfaces';
 
 const clusterPath = (clusterId: ClusterId) => `/clusters/${clusterId}`;
 

frontend/src/redux/reducers/brokers/actions.ts

@@ -1,6 +1,6 @@
 import { createAsyncAction} from 'typesafe-actions';
 import ActionType from './actionType';
-import { Broker, BrokerMetrics } from 'types';
+import { Broker, BrokerMetrics } from 'lib/interfaces';
 
 export const fetchBrokersAction = createAsyncAction(
   ActionType.GET_BROKERS__REQUEST,

frontend/src/redux/reducers/brokers/reducer.ts

@@ -1,4 +1,4 @@
-import { Action, BrokersState, ZooKeeperStatus, BrokerMetrics } from 'types';
+import { Action, BrokersState, ZooKeeperStatus, BrokerMetrics } from 'lib/interfaces';
 import actionType from 'redux/reducers/actionType';
 
 export const initialState: BrokersState =  {

frontend/src/redux/reducers/brokers/selectors.ts

@@ -1,5 +1,5 @@
 import { createSelector } from 'reselect';
-import { RootState, FetchStatus, BrokersState } from 'types';
+import { RootState, FetchStatus, BrokersState } from 'lib/interfaces';
 import { createFetchingSelector } from 'redux/reducers/loader/selectors';
 
 const brokersState = ({ brokers }: RootState): BrokersState => brokers;

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

@@ -3,7 +3,7 @@ import {
   fetchBrokersAction,
   fetchBrokerMetricsAction,
 } from './actions';
-import { PromiseThunk, ClusterId } from 'types';
+import { PromiseThunk, ClusterId } from 'lib/interfaces';
 
 
 export const fetchBrokers = (clusterId: ClusterId): PromiseThunk<void> => async (dispatch) => {

frontend/src/redux/reducers/clusters/actions.ts

@@ -1,6 +1,6 @@
 import { createAsyncAction} from 'typesafe-actions';
 import ActionType from './actionType';
-import { Cluster } from 'types';
+import { Cluster } from 'lib/interfaces';
 
 export const fetchClusterListAction = createAsyncAction(
   ActionType.GET_CLUSTERS__REQUEST,

frontend/src/redux/reducers/clusters/reducer.ts

@@ -1,4 +1,4 @@
-import { Cluster, Action } from 'types';
+import { Cluster, Action } from 'lib/interfaces';
 import actionType from 'redux/reducers/actionType';
 
 export const initialState: Cluster[] = [];

frontend/src/redux/reducers/clusters/selectors.ts

@@ -1,5 +1,5 @@
 import { createSelector } from 'reselect';
-import { Cluster, RootState, FetchStatus } from 'types';
+import { Cluster, RootState, FetchStatus } from 'lib/interfaces';
 import { createFetchingSelector } from 'redux/reducers/loader/selectors';
 
 const clustersState = ({ clusters }: RootState): Cluster[] => clusters;

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

@@ -4,7 +4,7 @@ import {
 import {
   fetchClusterListAction,
 } from './actions';
-import { Cluster, PromiseThunk } from 'types';
+import { Cluster, PromiseThunk } from 'lib/interfaces';
 
 export const fetchClustersList = (): PromiseThunk<void> => async (dispatch) => {
   dispatch(fetchClusterListAction.request());

frontend/src/redux/reducers/index.ts

@@ -3,7 +3,7 @@ import topics from './topics/reducer';
 import clusters from './clusters/reducer';
 import brokers from './brokers/reducer';
 import loader from './loader/reducer';
-import { RootState } from 'types';
+import { RootState } from 'lib/interfaces';
 
 export default combineReducers<RootState>({
   topics,

frontend/src/redux/reducers/loader/reducer.ts

@@ -1,4 +1,4 @@
-import { FetchStatus, Action, LoaderState } from 'types';
+import { FetchStatus, Action, LoaderState } from 'lib/interfaces';
 
 export const initialState: LoaderState = {};
 

frontend/src/redux/reducers/loader/selectors.ts

@@ -1,4 +1,4 @@
-import { RootState, FetchStatus } from 'types';
+import { RootState, FetchStatus } from 'lib/interfaces';
 
 export const createFetchingSelector = (action: string) =>
   (state: RootState) => (state.loader[action] || FetchStatus.notFetched);

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

@@ -1,6 +1,6 @@
 import { createAsyncAction} from 'typesafe-actions';
 import ActionType from './actionType';
-import { Topic, TopicDetails, TopicName, TopicConfig} from 'types';
+import { Topic, TopicDetails, TopicName, TopicConfig} from 'lib/interfaces';
 
 export const fetchTopicListAction = createAsyncAction(
   ActionType.GET_TOPICS__REQUEST,

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

@@ -1,4 +1,4 @@
-import { Action, TopicsState, Topic } from 'types';
+import { Action, TopicsState, Topic } from 'lib/interfaces';
 import actionType from 'redux/reducers/actionType';
 
 export const initialState: TopicsState = {

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

@@ -1,5 +1,5 @@
 import { createSelector } from 'reselect';
-import { RootState, TopicName, FetchStatus, TopicsState } from 'types';
+import { RootState, TopicName, FetchStatus, TopicsState } from 'lib/interfaces';
 import { createFetchingSelector } from 'redux/reducers/loader/selectors';
 
 const topicsState = ({ topics }: RootState): TopicsState => topics;

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

@@ -10,7 +10,7 @@ import {
   fetchTopicConfigAction,
   createTopicAction,
 } from './actions';
-import { PromiseThunk, ClusterId, TopicName, TopicFormData } from 'types';
+import { PromiseThunk, ClusterId, TopicName, TopicFormData } from 'lib/interfaces';
 
 export const fetchTopicList = (clusterId: ClusterId): PromiseThunk<void> => async (dispatch) => {
   dispatch(fetchTopicListAction.request());