[FE] Fix eslint and prettier errors

kafka-ui-react-app/.eslintrc.json

@@ -42,7 +42,8 @@
       { "extensions": [".js", ".jsx", ".ts", ".tsx"] }
     ],
     "jsx-a11y/label-has-associated-control": "off",
-    "no-param-reassign": [2, { "props": false }]
+    "no-param-reassign": [2, { "props": false }],
+    "import/prefer-default-export": "off"
   },
   "overrides": [
     {

kafka-ui-react-app/package.json

@@ -4,11 +4,12 @@
   "private": true,
   "dependencies": {
     "@types/react-datepicker": "^3.0.2",
+    "@types/uuid": "^8.3.0",
     "bulma": "^0.8.0",
     "bulma-switch": "^2.0.0",
     "classnames": "^2.2.6",
     "date-fns": "^2.14.0",
-    "eslint-import-resolver-typescript": "^2.0.0",
+    "eslint-import-resolver-typescript": "^2.3.0",
     "immer": "^6.0.5",
     "lodash": "^4.17.15",
     "pretty-ms": "^6.0.1",
@@ -24,25 +25,28 @@
     "redux-thunk": "^2.3.0",
     "reselect": "^4.0.0",
     "typesafe-actions": "^5.1.0",
-    "use-debounce": "^3.4.3"
+    "use-debounce": "^3.4.3",
+    "uuid": "^8.3.1"
   },
   "lint-staged": {
     "*.{js,ts,jsx,tsx}": [
-      "eslint -c .eslintrc.json --fix"
+      "eslint -c .eslintrc.json --fix",
+      "git add"
     ]
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "lint": "esprint check",
-    "lint:fix": "esprint check --fix",
+    "lint": "eslint --ext .tsx,.ts src/",
+    "lint:fix": "eslint --ext .tsx,.ts src/ --fix",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "mock": "node ./mock/index.js"
+    "mock": "node ./mock/index.js",
+    "tsc": "tsc"
   },
   "husky": {
     "hooks": {
-      "pre-commit": "yarn tsc --noEmit && lint-staged"
+      "pre-commit": "npm run tsc --noEmit && lint-staged"
     }
   },
   "eslintConfig": {
@@ -74,24 +78,24 @@
     "@types/react-router-dom": "^5.1.3",
     "@types/redux": "^3.6.0",
     "@types/redux-thunk": "^2.1.0",
-    "@typescript-eslint/eslint-plugin": "^2.27.0",
-    "@typescript-eslint/parser": "^2.27.0",
+    "@typescript-eslint/eslint-plugin": "^2.34.0",
+    "@typescript-eslint/parser": "^2.34.0",
     "dotenv": "^8.2.0",
     "eslint": "^6.8.0",
-    "eslint-config-airbnb": "^18.1.0",
-    "eslint-config-prettier": "^6.10.1",
-    "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-react": "^7.19.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^6.15.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^2.5.1",
     "esprint": "^0.6.0",
-    "husky": "^4.2.5",
+    "husky": "^4.3.0",
     "json-server": "^0.15.1",
-    "lint-staged": ">=10",
+    "lint-staged": "^10.5.1",
     "node-sass": "^4.13.1",
-    "prettier": "^2.0.4",
-    "react-scripts": "3.4.0",
+    "prettier": "^2.1.2",
+    "react-scripts": "3.4.4",
     "typescript": "~3.7.4"
   },
   "proxy": "http://localhost:8080"

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

@@ -1,17 +1,15 @@
 import { connect } from 'react-redux';
-import {
-  fetchClustersList,
-} from 'redux/actions';
-import App from './App';
+import { fetchClustersList } from 'redux/actions';
 import { getIsClusterListFetched } from 'redux/reducers/clusters/selectors';
 import { RootState } from 'redux/interfaces';
+import App from './App';
 
 const mapStateToProps = (state: RootState) => ({
   isClusterListFetched: getIsClusterListFetched(state),
 });
 
 const mapDispatchToProps = {
   fetchClustersList,
-}
+};
 
 export default connect(mapStateToProps, mapDispatchToProps)(App);

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

@@ -27,15 +27,14 @@ const Topics: React.FC<Props> = ({
   fetchBrokers,
   fetchBrokerMetrics,
 }) => {
-  React.useEffect(
-    () => {
-      fetchBrokers(clusterName);
-      fetchBrokerMetrics(clusterName);
-    },
-    [fetchBrokers, fetchBrokerMetrics, clusterName],
-  );
+  React.useEffect(() => {
+    fetchBrokers(clusterName);
+    fetchBrokerMetrics(clusterName);
+  }, [fetchBrokers, fetchBrokerMetrics, clusterName]);
 
-  useInterval(() => { fetchBrokerMetrics(clusterName); }, 5000);
+  useInterval(() => {
+    fetchBrokerMetrics(clusterName);
+  }, 5000);
 
   const zkOnline = zooKeeperStatus === ZooKeeperStatus.online;
 
@@ -44,12 +43,8 @@ const Topics: React.FC<Props> = ({
       <Breadcrumb>Brokers overview</Breadcrumb>
 
       <MetricsWrapper title="Uptime">
-        <Indicator label="Total Brokers">
-          {brokerCount}
-        </Indicator>
-        <Indicator label="Active Controllers">
-          {activeControllers}
-        </Indicator>
+        <Indicator label="Total Brokers">{brokerCount}</Indicator>
+        <Indicator label="Active Controllers">{activeControllers}</Indicator>
         <Indicator label="Zookeeper Status">
           <span className={cx('tag', zkOnline ? 'is-primary' : 'is-danger')}>
             {zkOnline ? 'Online' : 'Offline'}
@@ -59,17 +54,21 @@ const Topics: React.FC<Props> = ({
 
       <MetricsWrapper title="Partitions">
         <Indicator label="Online">
-          <span className={cx({'has-text-danger': offlinePartitionCount !== 0})}>
+          <span
+            className={cx({ 'has-text-danger': offlinePartitionCount !== 0 })}
+          >
             {onlinePartitionCount}
           </span>
-          <span className="subtitle has-text-weight-light"> of {onlinePartitionCount + offlinePartitionCount}</span>
+          <span className="subtitle has-text-weight-light">
+            {' '}
+            of
+            {onlinePartitionCount + offlinePartitionCount}
+          </span>
         </Indicator>
         <Indicator label="URP" title="Under replicated partitions">
           {underReplicatedPartitionCount}
         </Indicator>
-        <Indicator label="In Sync Replicas">
-          {inSyncReplicasCount}
-        </Indicator>
+        <Indicator label="In Sync Replicas">{inSyncReplicasCount}</Indicator>
         <Indicator label="Out of Sync Replicas">
           {outOfSyncReplicasCount}
         </Indicator>

kafka-ui-react-app/src/components/Brokers/BrokersContainer.ts

@@ -1,20 +1,24 @@
 import { connect } from 'react-redux';
-import {
-  fetchBrokers,
-  fetchBrokerMetrics,
-} from 'redux/actions';
-import Brokers from './Brokers';
+import { fetchBrokers, fetchBrokerMetrics } from 'redux/actions';
 import * as brokerSelectors from 'redux/reducers/brokers/selectors';
 import { RootState, ClusterName } from 'redux/interfaces';
 import { RouteComponentProps } from 'react-router-dom';
+import Brokers from './Brokers';
 
 interface RouteProps {
   clusterName: ClusterName;
 }
 
-interface OwnProps extends RouteComponentProps<RouteProps> { }
+type OwnProps = RouteComponentProps<RouteProps>;
 
-const mapStateToProps = (state: RootState, { match: { params: { clusterName } }}: OwnProps) => ({
+const mapStateToProps = (
+  state: RootState,
+  {
+    match: {
+      params: { clusterName },
+    },
+  }: OwnProps
+) => ({
   isFetched: brokerSelectors.getIsBrokerListFetched(state),
   clusterName,
   brokerCount: brokerSelectors.getBrokerCount(state),
@@ -24,12 +28,15 @@ const mapStateToProps = (state: RootState, { match: { params: { clusterName } }}
   offlinePartitionCount: brokerSelectors.getOfflinePartitionCount(state),
   inSyncReplicasCount: brokerSelectors.getInSyncReplicasCount(state),
   outOfSyncReplicasCount: brokerSelectors.getOutOfSyncReplicasCount(state),
-  underReplicatedPartitionCount: brokerSelectors.getUnderReplicatedPartitionCount(state)
+  underReplicatedPartitionCount: brokerSelectors.getUnderReplicatedPartitionCount(
+    state
+  ),
 });
 
 const mapDispatchToProps = {
   fetchBrokers: (clusterName: ClusterName) => fetchBrokers(clusterName),
-  fetchBrokerMetrics: (clusterName: ClusterName) => fetchBrokerMetrics(clusterName),
+  fetchBrokerMetrics: (clusterName: ClusterName) =>
+    fetchBrokerMetrics(clusterName),
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Brokers);

kafka-ui-react-app/src/components/ConsumerGroups/ConsumersGroupsContainer.ts

@@ -5,20 +5,27 @@ import { RouteComponentProps } from 'react-router-dom';
 import ConsumerGroups from './ConsumerGroups';
 import { getIsConsumerGroupsListFetched } from '../../redux/reducers/consumerGroups/selectors';
 
-
 interface RouteProps {
   clusterName: ClusterName;
 }
 
-interface OwnProps extends RouteComponentProps<RouteProps> { }
+type OwnProps = RouteComponentProps<RouteProps>;
 
-const mapStateToProps = (state: RootState, { match: { params: { clusterName } }}: OwnProps) => ({
+const mapStateToProps = (
+  state: RootState,
+  {
+    match: {
+      params: { clusterName },
+    },
+  }: OwnProps
+) => ({
   isFetched: getIsConsumerGroupsListFetched(state),
   clusterName,
 });
 
 const mapDispatchToProps = {
-  fetchConsumerGroupsList: (clusterName: ClusterName) => fetchConsumerGroupsList(clusterName),
+  fetchConsumerGroupsList: (clusterName: ClusterName) =>
+    fetchConsumerGroupsList(clusterName),
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(ConsumerGroups);

kafka-ui-react-app/src/components/ConsumerGroups/Details/DetailsContainer.ts

@@ -1,27 +1,40 @@
 import { connect } from 'react-redux';
-import Details from './Details';
-import {ClusterName, RootState} from 'redux/interfaces';
+import { ClusterName, RootState } from 'redux/interfaces';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
-import { getIsConsumerGroupDetailsFetched, getConsumerGroupByID } from 'redux/reducers/consumerGroups/selectors';
+import {
+  getIsConsumerGroupDetailsFetched,
+  getConsumerGroupByID,
+} from 'redux/reducers/consumerGroups/selectors';
 import { ConsumerGroupID } from 'redux/interfaces/consumerGroup';
 import { fetchConsumerGroupDetails } from 'redux/actions/thunks';
+import Details from './Details';
 
 interface RouteProps {
   clusterName: ClusterName;
   consumerGroupID: string;
 }
 
-interface OwnProps extends RouteComponentProps<RouteProps> { }
+type OwnProps = RouteComponentProps<RouteProps>;
 
-const mapStateToProps = (state: RootState, { match: { params: { consumerGroupID, clusterName } } }: OwnProps) => ({
+const mapStateToProps = (
+  state: RootState,
+  {
+    match: {
+      params: { consumerGroupID, clusterName },
+    },
+  }: OwnProps
+) => ({
   clusterName,
   consumerGroupID,
   isFetched: getIsConsumerGroupDetailsFetched(state),
-  ...getConsumerGroupByID(state, consumerGroupID)
+  ...getConsumerGroupByID(state, consumerGroupID),
 });
 
 const mapDispatchToProps = {
-  fetchConsumerGroupDetails: (clusterName: ClusterName, consumerGroupID: ConsumerGroupID) => fetchConsumerGroupDetails(clusterName, consumerGroupID),
+  fetchConsumerGroupDetails: (
+    clusterName: ClusterName,
+    consumerGroupID: ConsumerGroupID
+  ) => fetchConsumerGroupDetails(clusterName, consumerGroupID),
 };
 
 export default withRouter(

kafka-ui-react-app/src/components/ConsumerGroups/List/ListContainer.ts

@@ -1,20 +1,25 @@
 import { connect } from 'react-redux';
-import {ClusterName, RootState} from 'redux/interfaces';
+import { ClusterName, RootState } from 'redux/interfaces';
 import { getConsumerGroupsList } from 'redux/reducers/consumerGroups/selectors';
-import List from './List';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
+import List from './List';
 
 interface RouteProps {
   clusterName: ClusterName;
 }
 
-interface OwnProps extends RouteComponentProps<RouteProps> { }
+type OwnProps = RouteComponentProps<RouteProps>;
 
-const mapStateToProps = (state: RootState, { match: { params: { clusterName } } }: OwnProps) => ({
+const mapStateToProps = (
+  state: RootState,
+  {
+    match: {
+      params: { clusterName },
+    },
+  }: OwnProps
+) => ({
   clusterName,
-  consumerGroups: getConsumerGroupsList(state)
+  consumerGroups: getConsumerGroupsList(state),
 });
 
-export default withRouter(
-  connect(mapStateToProps)(List)
-);
+export default withRouter(connect(mapStateToProps)(List));

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

@@ -4,23 +4,28 @@ import formatBytes from 'lib/utils/formatBytes';
 import { NavLink } from 'react-router-dom';
 import { clusterBrokersPath } from 'lib/paths';
 
-const ClusterWidget: React.FC<Cluster> = ({
-  name,
-  status,
-  topicCount,
-  brokerCount,
-  bytesInPerSec,
-  bytesOutPerSec,
-  onlinePartitionCount,
+interface ClusterWidgetProps {
+  cluster: Cluster;
+}
+
+const ClusterWidget: React.FC<ClusterWidgetProps> = ({
+  cluster: {
+    name,
+    status,
+    topicCount,
+    brokerCount,
+    bytesInPerSec,
+    bytesOutPerSec,
+    onlinePartitionCount,
+  },
 }) => (
   <NavLink to={clusterBrokersPath(name)} className="column is-full-modile is-6">
     <div className="box is-hoverable">
-      <div
-        className="title is-6 has-text-overflow-ellipsis"
-        title={name}
-      >
+      <div className="title is-6 has-text-overflow-ellipsis" title={name}>
         <div
-          className={`tag has-margin-right ${status === ClusterStatus.Online ? 'is-primary' : 'is-danger'}`}
+          className={`tag has-margin-right ${
+            status === ClusterStatus.Online ? 'is-primary' : 'is-danger'
+          }`}
         >
           {status}
         </div>