refactor(client): refactor the directory

client/src/containers/Acls/Acls.jsx → client/src/containers/Acl/AclList/Acls.jsx

@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
-import Header from '../Header';
-import Table from '../../components/Table';
-import * as constants from '../../utils/constants';
-import { get } from '../../utils/api';
-import { uriAclsList } from '../../utils/endpoints';
-import SearchBar from '../../components/SearchBar';
+import Header from '../../Header';
+import Table from '../../../components/Table';
+import * as constants from '../../../utils/constants';
+import { get } from '../../../utils/api';
+import { uriAclsList } from '../../../utils/endpoints';
+import SearchBar from '../../../components/SearchBar';
 
 class Acls extends Component {
   state = {

client/src/containers/ConnectList/ConnectList.jsx → client/src/containers/Connect/ConnectList/ConnectList.jsx

@@ -1,12 +1,12 @@
 import React, { Component } from 'react';
 
-import Header from '../Header';
-import Table from '../../components/Table/Table';
-import constants from '../../utils/constants';
+import Header from '../../Header';
+import Table from '../../../components/Table/Table';
+import constants from '../../../utils/constants';
 import { Link } from 'react-router-dom';
-import { get, remove } from '../../utils/api';
-import { uriConnectDefinitions, uriDeleteDefinition } from '../../utils/endpoints';
-import ConfirmModal from '../../components/Modal/ConfirmModal/ConfirmModal';
+import { get, remove } from '../../../utils/api';
+import { uriConnectDefinitions, uriDeleteDefinition } from '../../../utils/endpoints';
+import ConfirmModal from '../../../components/Modal/ConfirmModal/ConfirmModal';
 import AceEditor from 'react-ace';
 import 'ace-builds/webpack-resolver';
 import 'ace-builds/src-noconflict/mode-json';

client/src/containers/ConsumerGroupList/ConsumerGroupList.jsx → client/src/containers/ConsumerGroup/ConsumerGroupList/ConsumerGroupList.jsx

@@ -1,13 +1,13 @@
 import React, { Component } from 'react';
-import Table from '../../components/Table';
-import { uriConsumerGroups, uriConsumerGroupDelete } from '../../utils/endpoints';
-import constants from '../../utils/constants';
-import { calculateTopicOffsetLag } from '../../utils/converters';
-import Header from '../Header';
-import SearchBar from '../../components/SearchBar';
-import Pagination from '../../components/Pagination';
-import ConfirmModal from '../../components/Modal/ConfirmModal';
-import api, { remove } from '../../utils/api';
+import Table from '../../../components/Table';
+import { uriConsumerGroups, uriConsumerGroupDelete } from '../../../utils/endpoints';
+import constants from '../../../utils/constants';
+import { calculateTopicOffsetLag } from '../../../utils/converters';
+import Header from '../../Header';
+import SearchBar from '../../../components/SearchBar';
+import Pagination from '../../../components/Pagination';
+import ConfirmModal from '../../../components/Modal/ConfirmModal';
+import api, { remove } from '../../../utils/api';
 import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 class ConsumerGroupList extends Component {
@@ -105,7 +105,7 @@ class ConsumerGroupList extends Component {
     return <span className="badge badge-primary"> {coordinator}</span>;
   }
 
-  handleTopics(groupedTopicOffset) {
+  handleTopics(group, groupedTopicOffset) {
     const noPropagation = e => e.stopPropagation();
     return Object.keys(groupedTopicOffset).map(topicId => {
       const topicOffsets = groupedTopicOffset[topicId];
@@ -114,7 +114,7 @@ class ConsumerGroupList extends Component {
       return (
         <a
           href={`/ui/${this.state.selectedCluster}/topic/${topicId}`}
-          key="lagTopic.topicId"
+          key={group + '-' + topicId}
           className="btn btn-dark btn-sm mb-1 mr-1"
           onClick={noPropagation}
         >
@@ -222,7 +222,7 @@ class ConsumerGroupList extends Component {
               colName: 'Topics',
               cell: obj => {
                 if (obj.topics) {
-                  return this.handleTopics(obj.topics);
+                  return this.handleTopics(obj.id, obj.topics);
                 }
               }
             }

client/src/containers/NodesList/Node/Node.jsx → client/src/containers/Node/NodeDetail/Node.jsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import Header from '../../Header';
-import NodeConfigs from '../Node/NodeConfigs/NodeConfigs';
-import NodeLogs from '../Node/NodeLogs/NodeLogs';
+import NodeConfigs from './/NodeConfigs/NodeConfigs';
+import NodeLogs from './/NodeLogs/NodeLogs';
 
 class Node extends Component {
   state = {

client/src/containers/NodesList/NodesList.jsx → client/src/containers/Node/NodeList/NodesList.jsx

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
-import Header from '../Header';
-import Table from '../../components/Table';
-import * as constants from '../../utils/constants';
-import { get } from '../../utils/api';
-import { uriNodes } from '../../utils/endpoints';
+import Header from '../../Header';
+import Table from '../../../components/Table';
+import * as constants from '../../../utils/constants';
+import { get } from '../../../utils/api';
+import { uriNodes } from '../../../utils/endpoints';
 
 class NodesList extends Component {
   state = {

client/src/containers/SchemaList/SchemaList.jsx → client/src/containers/Schema/SchemaList/SchemaList.jsx

@@ -1,13 +1,13 @@
 import React, { Component } from 'react';
-import Table from '../../components/Table';
-import endpoints, { uriDeleteSchema } from '../../utils/endpoints';
-import constants from '../../utils/constants';
+import Table from '../../../components/Table';
+import endpoints, { uriDeleteSchema } from '../../../utils/endpoints';
+import constants from '../../../utils/constants';
 import { Link } from 'react-router-dom';
-import Header from '../Header';
-import SearchBar from '../../components/SearchBar';
-import Pagination from '../../components/Pagination';
-import ConfirmModal from '../../components/Modal/ConfirmModal';
-import api, { remove } from '../../utils/api';
+import Header from '../../Header';
+import SearchBar from '../../../components/SearchBar';
+import Pagination from '../../../components/Pagination';
+import ConfirmModal from '../../../components/Modal/ConfirmModal';
+import api, { remove } from '../../../utils/api';
 import './styles.scss';
 import AceEditor from 'react-ace';
 import 'ace-builds/webpack-resolver';

client/src/containers/TopicList/TopicList.jsx → client/src/containers/Topic/TopicList/TopicList.jsx

@@ -1,14 +1,14 @@
 import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
-import Table from '../../components/Table';
-import Header from '../Header';
-import SearchBar from '../../components/SearchBar';
-import Pagination from '../../components/Pagination';
-import ConfirmModal from '../../components/Modal/ConfirmModal';
-import api, { remove } from '../../utils/api';
-import { uriDeleteTopics, uriTopics } from '../../utils/endpoints';
-import constants from '../../utils/constants';
-import { calculateTopicOffsetLag, showBytes } from '../../utils/converters';
+import Table from '../../../components/Table';
+import Header from '../../Header';
+import SearchBar from '../../../components/SearchBar';
+import Pagination from '../../../components/Pagination';
+import ConfirmModal from '../../../components/Modal/ConfirmModal';
+import api, { remove } from '../../../utils/api';
+import { uriDeleteTopics, uriTopics } from '../../../utils/endpoints';
+import constants from '../../../utils/constants';
+import { calculateTopicOffsetLag, showBytes } from '../../../utils/converters';
 import './styles.scss';
 import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';

client/src/containers/TopicList/Topic/TopicProduce/TopicProduce.jsx → client/src/containers/Topic/TopicProduce/TopicProduce.jsx

@@ -1,17 +1,17 @@
 import React from 'react';
-import Form from '../../../../components/Form/Form';
-import Header from '../../../Header';
+import Form from '../../../components/Form/Form';
+import Header from '../../Header';
 import Joi from 'joi-browser';
 import Dropdown from 'react-bootstrap/Dropdown';
-import { get, post } from '../../../../utils/api';
-import { formatDateTime } from '../../../../utils/converters';
+import { get, post } from '../../../utils/api';
+import { formatDateTime } from '../../../utils/converters';
 import {
   uriPreferredSchemaForTopic,
   uriTopicsPartitions,
   uriTopicsProduce
-} from '../../../../utils/endpoints';
+} from '../../../utils/endpoints';
 import moment from 'moment';
-import DatePicker from '../../../../components/DatePicker';
+import DatePicker from '../../../components/DatePicker';
 import Tooltip from '@material-ui/core/Tooltip';
 import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';

client/src/containers/TopicList/Topic/TopicProduce/TopicProduce.test.js → client/src/containers/Topic/TopicProduce/TopicProduce.test.js

@@ -3,7 +3,7 @@ import React, { Children } from 'react';
 import ReactDOM from 'react-dom';
 import { createMemoryHistory } from 'history';
 import TopicProduce from './TopicProduce';
-import App from '../../../../App';
+import App from '../../../App';
 import { render } from '@testing-library/react';
 
 import { MemoryRouter } from 'react-router-dom';

client/src/index.scss

@@ -34,8 +34,8 @@ $fa-font-path: "../fonts";
 // containers
 @import "containers/SideBar/styles.scss";
 @import "containers/Tail/styles.scss";
-@import "containers/NodesList/Node/styles.scss";
-@import "containers/TopicList/Topic/TopicProduce/styles.scss";
+@import "src/containers/Node/NodeDetail/styles.scss";
+@import "src/containers/Topic/TopicProduce/styles.scss";
 @import "containers/Login/styles.scss";
 
 #content {

client/src/utils/Routes.js

@@ -1,26 +1,26 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { withRouter, Switch, Route, Redirect } from 'react-router-dom';
-import TopicList from '../containers/TopicList';
-import Topic from '../containers/TopicList/Topic';
-import NodesList from '../containers/NodesList/NodesList';
-import NodeDetails from '../containers/NodesList/Node';
+import TopicList from '../containers/Topic/TopicList';
+import Topic from '../containers/Topic/Topic';
+import NodesList from '../containers/Node/NodeList/NodesList';
+import NodeDetails from '../containers/Node/NodeDetail';
 import Base from '../components/Base/Base.jsx';
 import Tail from '../containers/Tail';
-import Acls from '../containers/Acls';
-import ConnectList from '../containers/ConnectList/ConnectList';
-import ConnectCreate from '../containers/ConnectList/ConnectCreate/ConnectCreate';
-import Connect from '../containers/ConnectList/Connect/Connect';
-import TopicCreate from '../containers/TopicList/TopicCreate/TopicCreate';
-import TopicProduce from '../containers/TopicList/Topic/TopicProduce';
+import Acls from '../containers/Acl/AclList';
+import ConnectList from '../containers/Connect/ConnectList/ConnectList';
+import ConnectCreate from '../containers/Connect/ConnectCreate/ConnectCreate';
+import Connect from '../containers/Connect/ConnectDetail/Connect';
+import TopicCreate from '../containers/Topic/TopicCreate/TopicCreate';
+import TopicProduce from '../containers/Topic/TopicProduce';
 import Loading from '../containers/Loading';
-import ConsumerGroupList from '../containers/ConsumerGroupList';
-import ConsumerGroup from '../containers/ConsumerGroupList/ConsumerGroup';
-import Schema from '../containers/SchemaList/Schema/Schema';
-import SchemaList from '../containers/SchemaList/SchemaList';
-import SchemaCreate from '../containers/SchemaList/SchemaCreate/SchemaCreate';
-import ConsumerGroupUpdate from '../containers/ConsumerGroupList/ConsumerGroup/ConsumerGroupUpdate';
-import AclDetails from '../containers/Acls/AclDetails';
+import ConsumerGroupList from '../containers/ConsumerGroup/ConsumerGroupList';
+import ConsumerGroup from '../containers/ConsumerGroup/ConsumerGroupDetail';
+import Schema from '../containers/Schema/SchemaDetail/Schema';
+import SchemaList from '../containers/Schema/SchemaList/SchemaList';
+import SchemaCreate from '../containers/Schema/SchemaCreate/SchemaCreate';
+import ConsumerGroupUpdate from '../containers/ConsumerGroup/ConsumerGroupDetail/ConsumerGroupUpdate';
+import AclDetails from '../containers/Acl/AclDetail';
 import Login from '../containers/Login';
 
 import history from './history';