diff --git a/client/.prettierignore b/client/.prettierignore
new file mode 100644
index 000000000..e3fbd9833
--- /dev/null
+++ b/client/.prettierignore
@@ -0,0 +1,2 @@
+build
+node_modules
diff --git a/client/package-lock.json b/client/package-lock.json
index 925a2cfd5..3058f96ab 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "akhq-front-end",
-  "version": "0.1.0",
+  "version": "0.23.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "akhq-front-end",
-      "version": "0.1.0",
+      "version": "0.23.0",
       "dependencies": {
         "@date-io/moment": "^2.8.0",
         "@material-ui/core": "^4.9.5",
@@ -16,7 +16,7 @@
         "ace-builds": "^1.4.8",
         "axios": "^0.21.1",
         "axios-progress-bar": "^1.2.0",
-        "bootstrap": "^4.5.0",
+        "bootstrap": "^4.6.1",
         "convert-units": "^2.3.4",
         "css-loader": "^3.4.1",
         "font-awesome": "^4.7.0",
@@ -5846,13 +5846,19 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
     "node_modules/bootstrap": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
-      "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/bootstrap"
-      },
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.2.tgz",
+      "integrity": "sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
       "peerDependencies": {
         "jquery": "1.9.1 - 3",
         "popper.js": "^1.16.1"
@@ -27369,9 +27375,9 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
     "bootstrap": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
-      "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==",
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.2.tgz",
+      "integrity": "sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==",
       "requires": {}
     },
     "brace-expansion": {
diff --git a/client/package.json b/client/package.json
index 8c491f574..311135e69 100644
--- a/client/package.json
+++ b/client/package.json
@@ -12,7 +12,7 @@
     "ace-builds": "^1.4.8",
     "axios": "^0.21.1",
     "axios-progress-bar": "^1.2.0",
-    "bootstrap": "^4.5.0",
+    "bootstrap": "^4.6.1",
     "convert-units": "^2.3.4",
     "css-loader": "^3.4.1",
     "font-awesome": "^4.7.0",
@@ -35,11 +35,11 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "set INLINE_RUNTIME_CHUNK=false&& CI=false DISABLE_ESLINT_PLUGIN=true react-scripts build",
+    "build": "set INLINE_RUNTIME_CHUNK=false&& react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "lint": "eslint src",
-    "lint:fix": "eslint --fix ."
+    "lint:fix": "eslint --fix src/**/*.js{,x}"
   },
   "eslintConfig": {
     "extends": "react-app"
diff --git a/client/src/components/Base/Base.jsx b/client/src/components/Base/Base.jsx
index 40d488ba4..b03fae13b 100644
--- a/client/src/components/Base/Base.jsx
+++ b/client/src/components/Base/Base.jsx
@@ -1,10 +1,12 @@
 import './Base.scss';
-import React, { Component } from 'react';
+import React, { Component } from 'react'
+import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
 import Sidebar from '../../containers/SideBar';
 import constants from '../../utils/constants';
 import Loading from '../../containers/Loading';
 import { Helmet } from 'react-helmet';
+
 class Base extends Component {
   state = {
     clusterId: '',
@@ -88,4 +90,12 @@ class Base extends Component {
   }
 }
 
+Base.propTypes = {
+  history: PropTypes.object,
+  match: PropTypes.object,
+  location: PropTypes.object,
+  clusters: PropTypes.array,
+  children: PropTypes.any,
+}
+
 export default withRouter(Base);
diff --git a/client/src/components/DatePicker/DatePicker.jsx b/client/src/components/DatePicker/DatePicker.jsx
index 1587793b0..bb3f81af3 100644
--- a/client/src/components/DatePicker/DatePicker.jsx
+++ b/client/src/components/DatePicker/DatePicker.jsx
@@ -1,14 +1,10 @@
-import React from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import DateTimePicker from 'react-datepicker';
 import moment from 'moment';
 import { formatDateTime } from '../../utils/converters';
 
-class DatePicker extends React.Component {
-  static propTypes = {
-    value: PropTypes.string,
-    onChange: PropTypes.func
-  };
+class DatePicker extends Component {
 
   state = {
     value: '',
@@ -95,4 +91,13 @@ class DatePicker extends React.Component {
   };
 }
 
+DatePicker.propTypes = {
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  showDateTimeInput: PropTypes.bool,
+  showTimeInput: PropTypes.bool,
+  showTimeSelect: PropTypes.bool,
+  onClear: PropTypes.func,
+};
+
 export default DatePicker;
diff --git a/client/src/components/Form/Form.jsx b/client/src/components/Form/Form.jsx
index 24601e557..489a54f00 100644
--- a/client/src/components/Form/Form.jsx
+++ b/client/src/components/Form/Form.jsx
@@ -87,7 +87,6 @@ class Form extends Root {
     label,
     placeholder,
     type = 'text',
-    onChange = this.handleChange,
     noStyle,
     wrapperClass,
     inputClass,
@@ -114,7 +113,7 @@ class Form extends Root {
 
   renderJSONInput = (name, label, onChange, textMode, options, rest) => {
     const { formData, errors } = this.state;
-    const inputMode = textMode ? "text" : (formData.schemaType === "PROTOBUF" ? "protobuf"  : "json")
+    const inputMode = textMode ? 'text' : formData.schemaType === 'PROTOBUF' ? 'protobuf' : 'json';
     return (
       <div className="form-group row">
         {label !== '' ? (
@@ -126,7 +125,7 @@ class Form extends Root {
         )}
         <div className="col-sm-10" style={{ height: '100%' }}>
           <AceEditor
-            mode={ inputMode }
+            mode={inputMode}
             id={name}
             theme="merbivore_soft"
             value={formData[name]}
@@ -242,21 +241,20 @@ class Form extends Root {
     );
   };
 
-  renderCheckbox = (name, label, isChecked, onChange, isDefaultChecked, rest) => {
+  renderCheckbox = (name, isChecked, onChange, isDefaultChecked, rest) => {
     return (
-        <input
+      <input
         type="checkbox"
         name={name}
         id={name}
-        class="form-input-check"
+        className="form-input-check"
         checked={isChecked}
         onChange={onChange}
-        defaultChecked={ isDefaultChecked ? isDefaultChecked : false}
+        defaultChecked={isDefaultChecked ? isDefaultChecked : false}
         {...rest}
-        />
+      />
     );
   };
 }
 
 export default Form;
-
diff --git a/client/src/components/Form/Input/Input.jsx b/client/src/components/Form/Input/Input.jsx
index 64bc2b079..7b7926516 100644
--- a/client/src/components/Form/Input/Input.jsx
+++ b/client/src/components/Form/Input/Input.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 const Input = props => {
   const { name, label, placeholder, error, noStyle, wrapperClass, inputClass, ...rest } = props;
@@ -16,7 +17,7 @@ const Input = props => {
   }
 
   return (
-    <div className={`${wrapperClassRender} row`}>
+    <div className={`${wrapperClassRender}`}>
       {label !== '' ? (
         <label htmlFor={name} className="col-sm-2 col-form-label">
           {label}
@@ -44,4 +45,14 @@ const Input = props => {
   );
 };
 
+Input.propTypes = {
+  name: PropTypes.string,
+  label:PropTypes.string,
+  placeholder: PropTypes.string,
+  error: PropTypes.string,
+  noStyle: PropTypes.bool,
+  wrapperClass: PropTypes.string,
+  inputClass: PropTypes.string
+};
+
 export default Input;
diff --git a/client/src/components/Form/RadioGroup/RadioGroup.jsx b/client/src/components/Form/RadioGroup/RadioGroup.jsx
index 8f475afe6..8955a9889 100644
--- a/client/src/components/Form/RadioGroup/RadioGroup.jsx
+++ b/client/src/components/Form/RadioGroup/RadioGroup.jsx
@@ -1,10 +1,9 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 
 class RadioGroup extends Component {
   renderOptions = (name, items, handleChange) => {
-    let renderedItems = [];
-    for (let item of items) {
-      renderedItems.push(
+    return items.map( item =>
         <div id={`radio-option-${name}`} key={item.value} className="form-check">
           <input
             className="form-check-input"
@@ -20,9 +19,6 @@ class RadioGroup extends Component {
           </label>
         </div>
       );
-    }
-
-    return renderedItems;
   };
 
   render() {
@@ -41,4 +37,11 @@ class RadioGroup extends Component {
   }
 }
 
+RadioGroup.propTypes = {
+  name: PropTypes.string,
+  label: PropTypes.string,
+  items: PropTypes.array,
+  handleChange: PropTypes.func,
+}
+
 export default RadioGroup;
diff --git a/client/src/components/Form/Select/Select.jsx b/client/src/components/Form/Select/Select.jsx
index 8279ec5d1..9eb4f60ab 100644
--- a/client/src/components/Form/Select/Select.jsx
+++ b/client/src/components/Form/Select/Select.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 const Select = ({ name, label, items, error, wrapperClass, selectClass, blankItem, ...rest }) => {
     let wrapperClassRender = 'form-group';
@@ -11,7 +12,7 @@ const Select = ({ name, label, items, error, wrapperClass, selectClass, blankIte
     }
 
     return (
-    <div className={`${wrapperClassRender} row`}>
+    <div className={`${wrapperClassRender}`}>
       {label !== '' ? (
         <label htmlFor={name} className="col-sm-2 col-form-label">
           {label}
@@ -38,4 +39,14 @@ const Select = ({ name, label, items, error, wrapperClass, selectClass, blankIte
   );
 };
 
+Select.propTypes = {
+    name: PropTypes.string,
+    label: PropTypes.string,
+    items: PropTypes.array,
+    error: PropTypes.string,
+    blankItem: PropTypes.bool,
+    wrapperClass: PropTypes.string,
+    selectClass: PropTypes.string,
+}
+
 export default Select;
diff --git a/client/src/components/Modal/ConfirmModal/ConfirmModal.jsx b/client/src/components/Modal/ConfirmModal/ConfirmModal.jsx
index a137f3e7f..89d624d4e 100644
--- a/client/src/components/Modal/ConfirmModal/ConfirmModal.jsx
+++ b/client/src/components/Modal/ConfirmModal/ConfirmModal.jsx
@@ -1,12 +1,11 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import '../styles.scss';
 
 function ConfirmModal({handleConfirm, handleCancel, show, message, confirmLabel, cancelLabel}) {
-    const showHideClassname = show ? 'modal display-block' : 'modal display-none';
-
     return (
-        <div className={showHideClassname}>
+        <div className={show ? 'modal display-block' : 'modal display-none'}>
             <div className="swal2-container swal2-center swal2-fade swal2-shown" style={{overflowY: 'auto'}}>
                 <div aria-labelledby="swal2-title" aria-describedby="swal2-content"
                      className="swal2-popup swal2-modal swal2-show" tabIndex="-1" role="dialog"
@@ -81,4 +80,13 @@ function ConfirmModal({handleConfirm, handleCancel, show, message, confirmLabel,
     );
 }
 
+ConfirmModal.propTypes = {
+    handleConfirm: PropTypes.func,
+    handleCancel: PropTypes.func,
+    show: PropTypes.bool,
+    message: PropTypes.string,
+    confirmLabel: PropTypes.string,
+    cancelLabel: PropTypes.string,
+}
+
 export default ConfirmModal;
diff --git a/client/src/components/Modal/Modal.jsx b/client/src/components/Modal/Modal.jsx
index 7973e21e4..cd169328c 100644
--- a/client/src/components/Modal/Modal.jsx
+++ b/client/src/components/Modal/Modal.jsx
@@ -1,15 +1,15 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import './styles.scss';
 
 function Modal({ show, children }) {
-    const showHideClassname = show ? 'modal display-block' : 'modal display-none';
-
-    return (
-        <div className={showHideClassname}>
-                {children}
-        </div>
-    );
+  return <div className={show ? 'modal display-block' : 'modal display-none'}>{children}</div>;
 }
 
+Modal.propTypes = {
+  children: PropTypes.any,
+  show: PropTypes.bool
+};
+
 export default Modal;
diff --git a/client/src/components/PageSize/PageSize.jsx b/client/src/components/PageSize/PageSize.jsx
index b7a2aec91..49be4520b 100644
--- a/client/src/components/PageSize/PageSize.jsx
+++ b/client/src/components/PageSize/PageSize.jsx
@@ -1,18 +1,14 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import './styles.scss';
 
 const PageSize = ({
-  pageNumber,
-  totalPageNumber,
   currentPageSize,
-  totalRecords,
   ranges = [10, 25, 50, 100, 150, 200],
   onChange,
-  editPageNumber,
-  showTotalPageNumber = true
 }) => {
-    var pageSizeOptions = [];
-    var pageSizeOptionsList = [];
+    let pageSizeOptions = [];
+    let pageSizeOptionsList = [];
     ranges.forEach(element => pageSizeOptions[element] = element );
     //if server's pageSize does not belong to ranges, it should be added - when the page is loaded for the first
     if(!ranges.includes(currentPageSize)){
@@ -24,11 +20,19 @@ const PageSize = ({
   return (
     <div id="result-per-page">
         <span>Results</span>
-        <select className="pagination mb-0" id="currentPageSize" name="currentPageSize" value={currentPageSize} onChange={(e) => {e.preventDefault(); onChange(pageSizeOptions[e.target.value])}}>
+        <select className="pagination mb-0" id="currentPageSize" name="currentPageSize"
+                value={currentPageSize}
+                onChange={(e) => {e.preventDefault(); onChange(pageSizeOptions[e.target.value])}}>
           {pageSizeOptionsList}
         </select>
       </div>
   );
 };
 
+PageSize.propTypes = {
+  ranges: PropTypes.array,
+  currentPageSize: PropTypes.number,
+  onChange: PropTypes.func,
+}
+
 export default PageSize;
\ No newline at end of file
diff --git a/client/src/components/Pagination/Pagination.jsx b/client/src/components/Pagination/Pagination.jsx
index 7fedcfec9..2925b0709 100644
--- a/client/src/components/Pagination/Pagination.jsx
+++ b/client/src/components/Pagination/Pagination.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import './styles.scss';
 
 const Pagination = ({
@@ -14,10 +15,6 @@ const Pagination = ({
     editPageNumber = true;
   }
 
-  if (totalRecords !== undefined) {
-
-  }
-
   return (
     <ul className="pagination mb-0">
       <li className={'page-item before'}>
@@ -65,4 +62,14 @@ const Pagination = ({
   );
 };
 
+Pagination.propTypes = {
+ pageNumber: PropTypes.number,
+ totalPageNumber: PropTypes.number,
+ totalRecords: PropTypes.number,
+ onChange: PropTypes.func,
+ onSubmit: PropTypes.func,
+ editPageNumber: PropTypes.bool,
+ showTotalPageNumber: PropTypes.bool
+}
+
 export default Pagination;
diff --git a/client/src/components/SearchBar/SearchBar.jsx b/client/src/components/SearchBar/SearchBar.jsx
index 65bb356d8..323efae9d 100644
--- a/client/src/components/SearchBar/SearchBar.jsx
+++ b/client/src/components/SearchBar/SearchBar.jsx
@@ -42,10 +42,14 @@ class SearchBar extends Form {
     this.setState({ formData: this.setupProps() });
   }
 
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate(prevProps) {
     const { search, topicListView, keepSearch } = this.props;
 
-    if(search !== prevProps.search || topicListView !== prevProps.topicListView || keepSearch !== prevProps.keepSearch) {
+    if (
+      search !== prevProps.search ||
+      topicListView !== prevProps.topicListView ||
+      keepSearch !== prevProps.keepSearch
+    ) {
       this.setupProps();
     }
   }
@@ -63,7 +67,7 @@ class SearchBar extends Form {
       formData['topicListView'] = topicListView;
       this.schema['topicListView'] = Joi.string().required();
     }
-    if(showKeepSearch) {
+    if (showKeepSearch) {
       formData['keepSearch'] = this.props.keepSearch;
       this.schema['keepSearch'] = Joi.boolean();
     }
@@ -156,14 +160,18 @@ class SearchBar extends Form {
               <span className="d-md-none">Search </span>
               <i className="fa fa-search" />
             </button>
-            {showKeepSearch && <span><input
-                type="checkbox"
-                name="keepSearch"
-                id="keepSearch"
-                onClick={(event) => this.props.onKeepSearchChange(event.target.checked)}
-                defaultChecked={formData['keepSearch']}
-              /> Keep search
-            </span>}
+            {showKeepSearch && (
+              <span>
+                <input
+                  type="checkbox"
+                  name="keepSearch"
+                  id="keepSearch"
+                  onClick={event => this.props.onKeepSearchChange(event.target.checked)}
+                  defaultChecked={formData['keepSearch']}
+                />{' '}
+                Keep search
+              </span>
+            )}
           </form>
         </div>
       </React.Fragment>
diff --git a/client/src/components/Table/Table.jsx b/client/src/components/Table/Table.jsx
index a6d1f469c..22d5f64b5 100644
--- a/client/src/components/Table/Table.jsx
+++ b/client/src/components/Table/Table.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import * as constants from '../../utils/constants';
 import './styles.scss';
 import Spinner from '../Spinner';
-import {Link} from 'react-router-dom';
+import { Link } from 'react-router-dom';
 
 class Table extends Component {
   state = {
@@ -132,16 +132,23 @@ class Table extends Component {
   }
 
   renderRow(row, index) {
-    const { actions, columns, extraRow, onExpand, noRowBackgroundChange, onDetails, handleExtraExpand, handleExtraCollapse, reduce } = this.props;
+    const {
+      actions,
+      columns,
+      extraRow,
+      onExpand,
+      noRowBackgroundChange,
+      onDetails,
+      handleExtraExpand,
+      handleExtraCollapse,
+      reduce
+    } = this.props;
     const { extraExpanded } = this.state;
 
     let extraRowColCollapsed;
     let extraRowColExpanded;
     const items = [
-      <tr
-        key={`tableRow${index}`}
-        className={reduce ? 'reduce' : ''}
-      >
+      <tr key={`tableRow${index}`} className={reduce ? 'reduce' : ''}>
         {columns.map((column, colIndex) => {
           let extraStyles = [];
           if (noRowBackgroundChange) {
@@ -215,11 +222,7 @@ class Table extends Component {
     ) {
       items.push(
         <tr key={'row-expandable-' + row.id}>
-          <td
-            key={'col-expandable-' + row.id}
-            colSpan={this.colspan()}
-            style={{ padding: 0 }}
-          >
+          <td key={'col-expandable-' + row.id} colSpan={this.colspan()} style={{ padding: 0 }}>
             {onExpand(row)}
           </td>
         </tr>
@@ -232,29 +235,43 @@ class Table extends Component {
           onClick={() => {
             if (
               !extraExpanded ||
-              !JSON.stringify(extraExpanded.find(expanded => expanded.subject ? expanded.subject === row.subject : expanded === row.id)) ||
-              !JSON.stringify(extraExpanded.find(expanded => expanded.subject ? expanded.subject === row.subject : expanded === row.id)).length > 0) {
-                typeof handleExtraExpand === 'function'
-                  ? this.setState({ extraExpanded: handleExtraExpand(extraExpanded, row)})
-                  : this.handleExtraExpand(row);
+              !JSON.stringify(
+                extraExpanded.find(expanded =>
+                  expanded.subject ? expanded.subject === row.subject : expanded === row.id
+                )
+              ) ||
+              !JSON.stringify(
+                extraExpanded.find(expanded =>
+                  expanded.subject ? expanded.subject === row.subject : expanded === row.id
+                )
+              ).length > 0
+            ) {
+              typeof handleExtraExpand === 'function'
+                ? this.setState({ extraExpanded: handleExtraExpand(extraExpanded, row) })
+                : this.handleExtraExpand(row);
             }
           }}
           key={'row-expanded-' + row.id}
         >
-          <td
-            style={{ backgroundColor: '#171819' }}
-            colSpan={this.colspan()}
-          >
+          <td style={{ backgroundColor: '#171819' }} colSpan={this.colspan()}>
             {' '}
             {extraExpanded &&
-            JSON.stringify(extraExpanded.find(expanded => expanded.subject ? expanded.subject === row.subject : expanded === row.id)) &&
-            JSON.stringify(extraExpanded.find(expanded => expanded.subject ? expanded.subject === row.subject : expanded === row.id)).length > 0 ? (
+            JSON.stringify(
+              extraExpanded.find(expanded =>
+                expanded.subject ? expanded.subject === row.subject : expanded === row.id
+              )
+            ) &&
+            JSON.stringify(
+              extraExpanded.find(expanded =>
+                expanded.subject ? expanded.subject === row.subject : expanded === row.id
+              )
+            ).length > 0 ? (
               <div className="close-container">
                 <span
                   onClick={() => {
                     typeof handleExtraCollapse === 'function'
-                        ? this.setState({ extraExpanded: handleExtraCollapse(extraExpanded, row)})
-                        : this.handleExtraCollapse(row);
+                      ? this.setState({ extraExpanded: handleExtraCollapse(extraExpanded, row) })
+                      : this.handleExtraCollapse(row);
                   }}
                   aria-hidden="true"
                 >
@@ -265,15 +282,31 @@ class Table extends Component {
             <div
               className={
                 extraExpanded &&
-                JSON.stringify(extraExpanded.find(expanded => expanded.subject ? expanded.subject === row.subject : expanded === row.id)) &&
-                JSON.stringify(extraExpanded.find(expanded => expanded.subject ? expanded.subject === row.subject : expanded === row.id)).length > 0
+                JSON.stringify(
+                  extraExpanded.find(expanded =>
+                    expanded.subject ? expanded.subject === row.subject : expanded === row.id
+                  )
+                ) &&
+                JSON.stringify(
+                  extraExpanded.find(expanded =>
+                    expanded.subject ? expanded.subject === row.subject : expanded === row.id
+                  )
+                ).length > 0
                   ? ''
                   : 'collapsed-extra-row'
               }
             >
               {extraExpanded &&
-              JSON.stringify(extraExpanded.find(expanded => expanded.subject ? expanded.subject === row.subject : expanded === row.id)) &&
-              JSON.stringify(extraExpanded.find(expanded => expanded.subject ? expanded.subject === row.subject : expanded === row.id)).length > 0
+              JSON.stringify(
+                extraExpanded.find(expanded =>
+                  expanded.subject ? expanded.subject === row.subject : expanded === row.id
+                )
+              ) &&
+              JSON.stringify(
+                extraExpanded.find(expanded =>
+                  expanded.subject ? expanded.subject === row.subject : expanded === row.id
+                )
+              ).length > 0
                 ? extraRowColExpanded
                 : extraRowColCollapsed}
             </div>
@@ -286,11 +319,23 @@ class Table extends Component {
   }
 
   renderContent(content) {
-    return content !== undefined ? content : <Spinner />
+    return content !== undefined ? content : <Spinner />;
   }
 
   renderActions(row) {
-    const { actions, onAdd, onDetails, onConfig, onDelete, onEdit, onRestart, onShare, onDownload, onCopy, idCol } = this.props;
+    const {
+      actions,
+      onAdd,
+      onDetails,
+      onConfig,
+      onDelete,
+      onEdit,
+      onRestart,
+      onShare,
+      onDownload,
+      onCopy,
+      idCol
+    } = this.props;
 
     let idColVal = idCol ? row[this.props.idCol] : row.id;
 
@@ -298,7 +343,8 @@ class Table extends Component {
       <>
         {actions.find(el => el === constants.TABLE_ADD) && (
           <td className="khq-row-action khq-row-action-main action-hover">
-            <span title="Add"
+            <span
+              title="Add"
               id="add"
               onClick={() => {
                 onAdd && onAdd();
@@ -310,27 +356,22 @@ class Table extends Component {
         )}
         {actions.find(el => el === constants.TABLE_DETAILS) && (
           <td className="khq-row-action khq-row-action-main action-hover">
-            <Link to={onDetails && onDetails(idColVal, row)}
-              id="details"
-              title="Details"
-            >
+            <Link to={onDetails && onDetails(idColVal, row)} id="details" title="Details">
               <i className="fa fa-search" />
             </Link>
           </td>
         )}
         {actions.find(el => el === constants.TABLE_CONFIG) && (
           <td className="khq-row-action khq-row-action-main action-hover">
-            <Link to={onConfig && onConfig(idColVal, row)}
-              id="config"
-              title="Config"
-            >
+            <Link to={onConfig && onConfig(idColVal, row)} id="config" title="Config">
               <i className="fa fa-gear" />
             </Link>
           </td>
         )}
         {actions.find(el => el === constants.TABLE_DELETE) && (
           <td className="khq-row-action khq-row-action-main action-hover">
-            <span title="Delete"
+            <span
+              title="Delete"
               id="delete"
               onClick={() => {
                 onDelete && onDelete(row);
@@ -342,7 +383,8 @@ class Table extends Component {
         )}
         {actions.find(el => el === constants.TABLE_EDIT) && (
           <td className="khq-row-action khq-row-action-main action-hover">
-            <span title="Edit"
+            <span
+              title="Edit"
               id="edit"
               onClick={() => {
                 onEdit && onEdit();
@@ -354,7 +396,8 @@ class Table extends Component {
         )}
         {actions.find(el => el === constants.TABLE_RESTART) && (
           <td className="khq-row-action khq-row-action-main action-hover">
-            <span title="Restart"
+            <span
+              title="Restart"
               id="restart"
               onClick={() => {
                 onRestart && onRestart(row);
@@ -365,53 +408,56 @@ class Table extends Component {
           </td>
         )}
         {actions.find(el => el === constants.TABLE_COPY) && (
-            <td className="khq-row-action khq-row-action-main action-hover">
-            <span title="Copy"
-                  id="copy"
-                  onClick={() => {
-                    onCopy && onCopy(row);
-                  }}
+          <td className="khq-row-action khq-row-action-main action-hover">
+            <span
+              title="Copy"
+              id="copy"
+              onClick={() => {
+                onCopy && onCopy(row);
+              }}
             >
               <i className="fa fa-clone" />
             </span>
-            </td>
+          </td>
         )}
         {actions.find(el => el === constants.TABLE_SHARE) && (
-            <td className="khq-row-action khq-row-action-main action-hover">
-            <span title="Share"
-                id="share"
-                onClick={() => {
-                  onShare && onShare(row);
-                }}
+          <td className="khq-row-action khq-row-action-main action-hover">
+            <span
+              title="Share"
+              id="share"
+              onClick={() => {
+                onShare && onShare(row);
+              }}
             >
               <i className="fa fa-share" />
             </span>
-            </td>
+          </td>
         )}
         {actions.find(el => el === constants.TABLE_DOWNLOAD) && (
-            <td className="khq-row-action khq-row-action-main action-hover">
-            <span title="Download"
-                id="download"
-                onClick={() => {
-                  onDownload && onDownload(row);
-                }}
+          <td className="khq-row-action khq-row-action-main action-hover">
+            <span
+              title="Download"
+              id="download"
+              onClick={() => {
+                onDownload && onDownload(row);
+              }}
             >
               <i className="fa fa-download" />
             </span>
-            </td>
+          </td>
         )}
       </>
     );
   }
 
   renderLoading() {
-      return (
-          <tr>
-            <td colSpan={this.colspan()} className="loading-rows">
-              <Spinner />
-            </td>
-          </tr>
-      );
+    return (
+      <tr>
+        <td colSpan={this.colspan()} className="loading-rows">
+          <Spinner />
+        </td>
+      </tr>
+    );
   }
 
   renderNoContent() {
@@ -445,7 +491,10 @@ class Table extends Component {
   colspan() {
     const { actions, columns } = this.props;
 
-    return columns.filter(column => !column.extraRow).length + (actions && actions.length ? actions.length : 0)
+    return (
+      columns.filter(column => !column.extraRow).length +
+      (actions && actions.length ? actions.length : 0)
+    );
   }
 
   render() {
@@ -470,14 +519,18 @@ class Table extends Component {
     if (noStripes) classNames += ' no-stripes';
 
     return (
-        <div className="table-responsive">
-          <table className={classNames}>
-            {this.renderHeader()}
-            <tbody>
-                {loading? this.renderLoading() : ((data && data.length > 0) ? allItemRows : this.renderNoContent())}
-            </tbody>
-          </table>
-        </div>
+      <div className="table-responsive">
+        <table className={classNames}>
+          {this.renderHeader()}
+          <tbody>
+            {loading
+              ? this.renderLoading()
+              : data && data.length > 0
+              ? allItemRows
+              : this.renderNoContent()}
+          </tbody>
+        </table>
+      </div>
     );
   }
 }
@@ -522,6 +575,13 @@ Table.propTypes = {
   loading: PropTypes.bool,
   history: PropTypes.object,
   rowId: PropTypes.func,
+
+  updateData: PropTypes.func,
+  extraRow: PropTypes.bool,
+  noRowBackgroundChange: PropTypes.bool,
+  onExpand: PropTypes.func,
+  reduce: PropTypes.bool,
+  noStripes: PropTypes.bool
 };
 
 export default Table;
diff --git a/client/src/containers/Acl/AclDetail/AclClusters/AclClusters.jsx b/client/src/containers/Acl/AclDetail/AclClusters/AclClusters.jsx
index e04e9f685..956113b2e 100644
--- a/client/src/containers/Acl/AclDetail/AclClusters/AclClusters.jsx
+++ b/client/src/containers/Acl/AclDetail/AclClusters/AclClusters.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Table from '../../../../components/Table/Table';
 import { uriAclsByPrincipal } from '../../../../utils/endpoints';
-import Root from "../../../../components/Root";
+import Root from '../../../../components/Root';
 
 class AclClusters extends Root {
   state = {
diff --git a/client/src/containers/Acl/AclDetail/AclDetails.jsx b/client/src/containers/Acl/AclDetail/AclDetails.jsx
index c031488bf..6b78f5e01 100644
--- a/client/src/containers/Acl/AclDetail/AclDetails.jsx
+++ b/client/src/containers/Acl/AclDetail/AclDetails.jsx
@@ -1,10 +1,11 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import Header from '../../Header';
 import AclGroups from './AclGroups/AclGroups';
 import AclTopics from './AclTopics/AclTopics';
 import AclClusters from './AclClusters/AclClusters';
 import AclTransactionalIds from './AclTransactionalIds/AclTransactionalIds';
-import {getSelectedTab} from "../../../utils/functions";
+import {getSelectedTab} from '../../../utils/functions';
 import { Link } from 'react-router-dom';
 
 class AclDetails extends Component {
@@ -29,7 +30,7 @@ class AclDetails extends Component {
     );
   }
 
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate(prevProps) {
     if (this.props.location.pathname !== prevProps.location.pathname) {
       const tabSelected = getSelectedTab(this.props, this.tabs);
       this.setState({ selectedTab: tabSelected });
@@ -119,4 +120,11 @@ class AclDetails extends Component {
   }
 }
 
+AclDetails.propTypes = {
+  match: PropTypes.object,
+  location: PropTypes.object,
+  history: PropTypes.object,
+
+}
+
 export default AclDetails;
diff --git a/client/src/containers/Acl/AclDetail/AclGroups/AclGroups.jsx b/client/src/containers/Acl/AclDetail/AclGroups/AclGroups.jsx
index bb20e34fb..5ca9011f5 100644
--- a/client/src/containers/Acl/AclDetail/AclGroups/AclGroups.jsx
+++ b/client/src/containers/Acl/AclDetail/AclGroups/AclGroups.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Table from '../../../../components/Table/Table';
 import { uriAclsByPrincipal } from '../../../../utils/endpoints';
-import Root from "../../../../components/Root";
+import Root from '../../../../components/Root';
 
 class AclGroups extends Root {
   state = {
diff --git a/client/src/containers/Acl/AclDetail/AclTopics/AclTopics.jsx b/client/src/containers/Acl/AclDetail/AclTopics/AclTopics.jsx
index 6abbee8ab..3db677c5e 100644
--- a/client/src/containers/Acl/AclDetail/AclTopics/AclTopics.jsx
+++ b/client/src/containers/Acl/AclDetail/AclTopics/AclTopics.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Table from '../../../../components/Table/Table';
 import { uriAclsByPrincipal } from '../../../../utils/endpoints';
-import Root from "../../../../components/Root";
+import Root from '../../../../components/Root';
 
 class AclTopics extends Root {
   state = {
diff --git a/client/src/containers/Acl/AclDetail/AclTransactionalIds/AclTransactionalIds.jsx b/client/src/containers/Acl/AclDetail/AclTransactionalIds/AclTransactionalIds.jsx
index a8a1d0026..68f13dc73 100644
--- a/client/src/containers/Acl/AclDetail/AclTransactionalIds/AclTransactionalIds.jsx
+++ b/client/src/containers/Acl/AclDetail/AclTransactionalIds/AclTransactionalIds.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Table from '../../../../components/Table/Table';
 import { uriAclsByPrincipal } from '../../../../utils/endpoints';
-import Root from "../../../../components/Root";
+import Root from '../../../../components/Root';
 
 class AclTransactionalIds extends Root {
   state = {
diff --git a/client/src/containers/Acl/AclList/Acls.jsx b/client/src/containers/Acl/AclList/Acls.jsx
index ee6663180..2637233f7 100644
--- a/client/src/containers/Acl/AclList/Acls.jsx
+++ b/client/src/containers/Acl/AclList/Acls.jsx
@@ -4,7 +4,7 @@ import Table from '../../../components/Table';
 import * as constants from '../../../utils/constants';
 import { uriAclsList } from '../../../utils/endpoints';
 import SearchBar from '../../../components/SearchBar';
-import Root from "../../../components/Root";
+import Root from '../../../components/Root';
 
 class Acls extends Root {
   state = {
@@ -18,12 +18,18 @@ class Acls extends Root {
 
   componentDidMount() {
     const { searchData } = this.state;
-    const query =  new URLSearchParams(this.props.location.search);
+    const query = new URLSearchParams(this.props.location.search);
     const { clusterId } = this.props.match.params;
 
-    this.setState({ selectedCluster: clusterId, searchData: { search: (query.get('search'))? query.get('search') : searchData.search }}, () => {
-      this.getAcls();
-    });
+    this.setState(
+      {
+        selectedCluster: clusterId,
+        searchData: { search: query.get('search') ? query.get('search') : searchData.search }
+      },
+      () => {
+        this.getAcls();
+      }
+    );
   }
 
   async getAcls() {
@@ -99,8 +105,8 @@ class Acls extends Root {
             <tr>
               <td colSpan={3}>
                 <div className="alert alert-warning mb-0" role="alert">
-                  No ACLS found, or the "authorizer.class.name" parameter is not configured on the
-                  cluster.
+                  No ACLS found, or the &quot;authorizer.class.name&quot; parameter is not
+                  configured on the cluster.
                 </div>
               </td>
             </tr>
diff --git a/client/src/containers/Connect/ConnectCreate/ConnectCreate.jsx b/client/src/containers/Connect/ConnectCreate/ConnectCreate.jsx
index b5eb62aa5..0df39e572 100644
--- a/client/src/containers/Connect/ConnectCreate/ConnectCreate.jsx
+++ b/client/src/containers/Connect/ConnectCreate/ConnectCreate.jsx
@@ -13,7 +13,7 @@ import 'ace-builds/src-noconflict/mode-json';
 import 'ace-builds/src-noconflict/theme-merbivore_soft';
 import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-import Root from "../../../components/Root";
+import Root from '../../../components/Root';
 
 class ConnectCreate extends Root {
   state = {
@@ -243,7 +243,7 @@ class ConnectCreate extends Root {
   handleGroup(group) {
     let { formData } = this.state;
     let groupDisplay = [
-      <tr className="bg-primary">
+      <tr key={0} className="bg-primary">
         <td colSpan="3">{group[0].group}</td>
       </tr>
     ];
diff --git a/client/src/containers/Connect/ConnectDetail/Connect.jsx b/client/src/containers/Connect/ConnectDetail/Connect.jsx
index c5ff156e9..56178fa4c 100644
--- a/client/src/containers/Connect/ConnectDetail/Connect.jsx
+++ b/client/src/containers/Connect/ConnectDetail/Connect.jsx
@@ -1,9 +1,10 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import Header from '../../Header/Header';
 import ConnectTasks from './ConnectTasks/ConnectTasks';
 import ConnectConfigs from './ConnectConfigs/ConnectConfigs';
-import {getSelectedTab} from "../../../utils/functions";
-import {Link} from "react-router-dom";
+import { getSelectedTab } from '../../../utils/functions';
+import { Link } from 'react-router-dom';
 
 class Connect extends Component {
   state = {
@@ -18,13 +19,14 @@ class Connect extends Component {
   componentDidMount() {
     const { clusterId, connectId, definitionId } = this.props.match.params;
     const tabSelected = getSelectedTab(this.props, this.tabs);
-    this.setState({ selectedTab: (tabSelected)? tabSelected : 'tasks' },
-        () => {
-          this.props.history.replace(`/ui/${clusterId}/connect/${connectId}/definition/${definitionId}/${this.state.selectedTab}`);
-        });
+    this.setState({ selectedTab: tabSelected ? tabSelected : 'tasks' }, () => {
+      this.props.history.replace(
+        `/ui/${clusterId}/connect/${connectId}/definition/${definitionId}/${this.state.selectedTab}`
+      );
+    });
   }
 
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate(prevProps) {
     if (this.props.location.pathname !== prevProps.location.pathname) {
       const tabSelected = getSelectedTab(this.props, this.tabs);
       this.setState({ selectedTab: tabSelected });
@@ -83,14 +85,16 @@ class Connect extends Component {
         <div className="tabs-container">
           <ul className="nav nav-tabs" role="tablist">
             <li className="nav-item">
-              <Link to={`/ui/${clusterId}/connect/${connectId}/definition/${definitionId}/tasks`}
+              <Link
+                to={`/ui/${clusterId}/connect/${connectId}/definition/${definitionId}/tasks`}
                 className={this.tabClassName('tasks')}
               >
                 Tasks
               </Link>
             </li>
             <li className="nav-item">
-              <Link to={`/ui/${clusterId}/connect/${connectId}/definition/${definitionId}/configs`}
+              <Link
+                to={`/ui/${clusterId}/connect/${connectId}/definition/${definitionId}/configs`}
                 className={this.tabClassName('configs')}
               >
                 Configs
@@ -109,4 +113,10 @@ class Connect extends Component {
   }
 }
 
+Connect.propTypes = {
+  history: PropTypes.object,
+  location: PropTypes.object,
+  match: PropTypes.object
+};
+
 export default Connect;
diff --git a/client/src/containers/Connect/ConnectDetail/ConnectConfigs/ConnectConfigs.jsx b/client/src/containers/Connect/ConnectDetail/ConnectConfigs/ConnectConfigs.jsx
index 7c332ca59..7c8d53ffe 100644
--- a/client/src/containers/Connect/ConnectDetail/ConnectConfigs/ConnectConfigs.jsx
+++ b/client/src/containers/Connect/ConnectDetail/ConnectConfigs/ConnectConfigs.jsx
@@ -85,14 +85,14 @@ class ConnectConfigs extends Form {
 
   getTransformAdditionalProperties() {
     const { configs } = this.state;
-    const filtered = Object.keys(configs).filter(configKey => configKey.startsWith('transforms.'))
-        .reduce((obj, configKey) => {
-          obj[configKey] = configs[configKey];
-          return obj;
-        }, {});
+    const filtered = Object.keys(configs)
+      .filter(configKey => configKey.startsWith('transforms.'))
+      .reduce((obj, configKey) => {
+        obj[configKey] = configs[configKey];
+        return obj;
+      }, {});
     return JSON.stringify(filtered, null, 2);
-  };
-
+  }
 
   handleDefinition = definition => {
     let def = '';
@@ -201,7 +201,11 @@ class ConnectConfigs extends Form {
             className="form-control"
             value={formData[plugin.name]}
             name={plugin.name}
-            disabled={plugin.name === 'name' || plugin.name === 'connector.class' || !(roles.connect && roles.connect['connect/update']) }
+            disabled={
+              plugin.name === 'name' ||
+              plugin.name === 'connector.class' ||
+              !(roles.connect && roles.connect['connect/update'])
+            }
             placeholder={plugin.defaultValue > 0 ? plugin.defaultValue : ''}
             onChange={({ currentTarget: input }) => {
               let { formData } = this.state;
@@ -254,7 +258,7 @@ class ConnectConfigs extends Form {
   handleGroup(group) {
     let { formData } = this.state;
     let groupDisplay = [
-      <tr className="bg-primary">
+      <tr key={0} className="bg-primary">
         <td colSpan="3">{group[0].group}</td>
       </tr>
     ];
@@ -363,7 +367,7 @@ class ConnectConfigs extends Form {
     await this.postApi(uriUpdateDefinition(clusterId, connectId, definitionId), body);
 
     history.push({
-      pathname: `/ui/${clusterId}/connect/${connectId}`,
+      pathname: `/ui/${clusterId}/connect/${connectId}`
     });
 
     toast.success(`${`Definition '${formData.name}' is updated`}`);
diff --git a/client/src/containers/Connect/ConnectDetail/ConnectTasks/ConnectTasks.jsx b/client/src/containers/Connect/ConnectDetail/ConnectTasks/ConnectTasks.jsx
index 1d64dadb0..22cf18f37 100644
--- a/client/src/containers/Connect/ConnectDetail/ConnectTasks/ConnectTasks.jsx
+++ b/client/src/containers/Connect/ConnectDetail/ConnectTasks/ConnectTasks.jsx
@@ -10,11 +10,10 @@ import {
   uriRestartTask
 } from '../../../../utils/endpoints';
 import ConfirmModal from '../../../../components/Modal/ConfirmModal/ConfirmModal';
-import './styles.scss';
 import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import AceEditor from 'react-ace';
-import Root from "../../../../components/Root";
+import Root from '../../../../components/Root';
 
 class ConnectTasks extends Root {
   state = {
diff --git a/client/src/containers/Connect/ConnectList/ConnectList.jsx b/client/src/containers/Connect/ConnectList/ConnectList.jsx
index a53d0eb1e..3581c5e97 100644
--- a/client/src/containers/Connect/ConnectList/ConnectList.jsx
+++ b/client/src/containers/Connect/ConnectList/ConnectList.jsx
@@ -11,10 +11,10 @@ import 'ace-builds/src-noconflict/mode-json';
 import 'ace-builds/src-noconflict/theme-merbivore_soft';
 import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-import Root from "../../../components/Root";
-import SearchBar from "../../../components/SearchBar";
-import Pagination from "../../../components/Pagination";
-import {handlePageChange, getPageNumber} from "./../../../utils/pagination"
+import Root from '../../../components/Root';
+import SearchBar from '../../../components/SearchBar';
+import Pagination from '../../../components/Pagination';
+import { handlePageChange, getPageNumber } from './../../../utils/pagination';
 
 class ConnectList extends Root {
   state = {
@@ -31,10 +31,10 @@ class ConnectList extends Root {
     history: this.props,
     searchData: {
       search: ''
-    },
+    }
   };
 
-  static getDerivedStateFromProps(nextProps, prevState) {
+  static getDerivedStateFromProps(nextProps) {
     const clusterId = nextProps.match.params.clusterId;
     const connectId = nextProps.match.params.connectId;
 
@@ -46,16 +46,19 @@ class ConnectList extends Root {
 
   componentDidMount() {
     const { searchData, pageNumber } = this.state;
-    const query =  new URLSearchParams(this.props.location.search);
-    this.setState({
-      searchData: { search: (query.get('search'))? query.get('search') : searchData.search },
-      pageNumber: (query.get('page')) ? parseInt(query.get('page')) : parseInt(pageNumber)
-    }, () => {
-      this.getConnectDefinitions();
-    });
+    const query = new URLSearchParams(this.props.location.search);
+    this.setState(
+      {
+        searchData: { search: query.get('search') ? query.get('search') : searchData.search },
+        pageNumber: query.get('page') ? parseInt(query.get('page')) : parseInt(pageNumber)
+      },
+      () => {
+        this.getConnectDefinitions();
+      }
+    );
   }
 
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate(prevProps) {
     if (this.props.location.pathname !== prevProps.location.pathname) {
       this.cancelAxiosRequests();
       this.renewCancelToken();
@@ -72,7 +75,9 @@ class ConnectList extends Root {
 
     this.setState({ loading: true });
 
-    let response = await this.getApi(uriConnectDefinitions(clusterId, connectId, search, pageNumber));
+    let response = await this.getApi(
+      uriConnectDefinitions(clusterId, connectId, search, pageNumber)
+    );
     let data = response.data;
     if (data.results) {
       this.handleData(data);
@@ -80,7 +85,7 @@ class ConnectList extends Root {
         this.props.history.push({
           pathname: `/ui/${this.state.clusterId}/connect/${this.state.connectId}`,
           search: `search=${this.state.searchData.search}&page=${pageNumber}`
-        })
+        });
       });
     } else {
       this.setState({ clusterId, tableData: [], totalPageNumber: 0, loading: false });
@@ -91,15 +96,15 @@ class ConnectList extends Root {
     const { clusterId, connectId, definitionToDelete: definition } = this.state;
 
     this.removeApi(uriDeleteDefinition(clusterId, connectId, definition))
-        .then(() => {
-          toast.success(`Definition '${definition}' is deleted`);
-          this.setState({ showDeleteModal: false, definitionToDelete: '' }, () => {
-            this.getConnectDefinitions();
-          });
-        })
-        .catch(() => {
-          this.setState({ showDeleteModal: false, topicToDelete: {} });
+      .then(() => {
+        toast.success(`Definition '${definition}' is deleted`);
+        this.setState({ showDeleteModal: false, definitionToDelete: '' }, () => {
+          this.getConnectDefinitions();
         });
+      })
+      .catch(() => {
+        this.setState({ showDeleteModal: false, topicToDelete: {} });
+      });
   };
 
   handleData = data => {
@@ -198,7 +203,8 @@ class ConnectList extends Root {
   };
 
   render() {
-    const { clusterId, connectId, tableData, loading, searchData, pageNumber, totalPageNumber } = this.state;
+    const { clusterId, connectId, tableData, loading, searchData, pageNumber, totalPageNumber } =
+      this.state;
     const roles = this.state.roles || {};
     const { history } = this.props;
 
@@ -206,22 +212,22 @@ class ConnectList extends Root {
       <div>
         <Header title={`Connect: ${connectId}`} history={history} />
         <nav
-            className="navbar navbar-expand-lg navbar-light bg-light mr-auto
+          className="navbar navbar-expand-lg navbar-light bg-light mr-auto
          khq-data-filter khq-sticky khq-nav"
         >
           <SearchBar
-              showSearch={true}
-              search={searchData.search}
-              showPagination={true}
-              pagination={pageNumber}
-              doSubmit={this.handleSearch}
+            showSearch={true}
+            search={searchData.search}
+            showPagination={true}
+            pagination={pageNumber}
+            doSubmit={this.handleSearch}
           />
 
           <Pagination
-              pageNumber={pageNumber}
-              totalPageNumber={totalPageNumber}
-              onChange={handlePageChange}
-              onSubmit={this.handlePageChangeSubmission}
+            pageNumber={pageNumber}
+            totalPageNumber={totalPageNumber}
+            onChange={handlePageChange}
+            onSubmit={this.handlePageChangeSubmission}
           />
         </nav>
 
@@ -305,16 +311,17 @@ class ConnectList extends Root {
             this.setState({ tableData: data });
           }}
           actions={this.getTableActions()}
-          onDetails={name => `/ui/${clusterId}/connect/${connectId}/definition/${name}` }
+          onDetails={name => `/ui/${clusterId}/connect/${connectId}/definition/${name}`}
           onDelete={row => {
             this.handleOnDelete(row.id);
           }}
           extraRow
           noStripes
           onExpand={obj => {
-            return Object.keys(obj.headers).map(header => {
+            return Object.keys(obj.headers).map((header, i) => {
               return (
                 <tr
+                  key={i}
                   style={{
                     display: 'flex',
                     flexDirection: 'row',
diff --git a/client/src/containers/ConsumerGroup/ConsumerGroupDetail/ConsumerGroup.jsx b/client/src/containers/ConsumerGroup/ConsumerGroupDetail/ConsumerGroup.jsx
index 0e604d8e1..77fbfb809 100644
--- a/client/src/containers/ConsumerGroup/ConsumerGroupDetail/ConsumerGroup.jsx
+++ b/client/src/containers/ConsumerGroup/ConsumerGroupDetail/ConsumerGroup.jsx
@@ -1,10 +1,11 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import Header from '../../Header';
 import ConsumerGroupTopics from './ConsumerGroupTopics/ConsumerGroupTopics';
 import ConsumerGroupMembers from './ConsumerGroupMembers/ConsumerGroupMembers';
 import { Link } from 'react-router-dom';
 import ConsumerGroupAcls from './ConsumerGroupAcls/ConsumerGroupAcls';
-import {getSelectedTab} from "../../../utils/functions";
+import { getSelectedTab } from '../../../utils/functions';
 
 class ConsumerGroup extends Component {
   state = {
@@ -15,22 +16,24 @@ class ConsumerGroup extends Component {
     roles: JSON.parse(sessionStorage.getItem('roles'))
   };
 
-  tabs = ['topics','members','acls'];
+  tabs = ['topics', 'members', 'acls'];
 
   componentDidMount() {
     const { clusterId, consumerGroupId } = this.props.match.params;
     const tabSelected = getSelectedTab(this.props, this.tabs);
     this.setState(
-        {
-          selectedTab: (tabSelected)? tabSelected : 'topics'
-        },
-        () => {
-          this.props.history.replace(`/ui/${clusterId}/group/${consumerGroupId}/${this.state.selectedTab}`);
-        }
+      {
+        selectedTab: tabSelected ? tabSelected : 'topics'
+      },
+      () => {
+        this.props.history.replace(
+          `/ui/${clusterId}/group/${consumerGroupId}/${this.state.selectedTab}`
+        );
+      }
     );
   }
 
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate(prevProps) {
     if (this.props.location.pathname !== prevProps.location.pathname) {
       const tabSelected = getSelectedTab(this.props, this.tabs);
       this.setState({ selectedTab: tabSelected });
@@ -88,18 +91,23 @@ class ConsumerGroup extends Component {
     const roles = this.state.roles || {};
     return (
       <div>
-        <Header title={`Consumer Group: ${decodeURIComponent(consumerGroupId)}`} history={this.props.history} />
+        <Header
+          title={`Consumer Group: ${decodeURIComponent(consumerGroupId)}`}
+          history={this.props.history}
+        />
         <div className="tabs-container">
           <ul className="nav nav-tabs" role="tablist">
             <li className="nav-item">
-              <Link to={`/ui/${clusterId}/group/${consumerGroupId}/topics`}
+              <Link
+                to={`/ui/${clusterId}/group/${consumerGroupId}/topics`}
                 className={this.tabClassName('topics')}
               >
                 Topics
               </Link>
             </li>
             <li className="nav-item">
-              <Link to={`/ui/${clusterId}/group/${consumerGroupId}/members`}
+              <Link
+                to={`/ui/${clusterId}/group/${consumerGroupId}/members`}
                 className={this.tabClassName('members')}
               >
                 Members
@@ -107,7 +115,8 @@ class ConsumerGroup extends Component {
             </li>
             {roles.acls && roles.acls['acls/read'] && (
               <li className="nav-item">
-                <Link to={`/ui/${clusterId}/group/${consumerGroupId}/acls`}
+                <Link
+                  to={`/ui/${clusterId}/group/${consumerGroupId}/acls`}
                   className={this.tabClassName('acls')}
                 >
                   ACLS
@@ -123,31 +132,40 @@ class ConsumerGroup extends Component {
           </div>
         </div>
 
-        {roles.group && (roles.group['group/offsets/delete'] || roles.group['group/offsets/update']) && (
-          <aside>
-            <li className="aside-button">
-              {roles.group['group/offsets/delete'] && (
-                <Link
-                  to={`/ui/${clusterId}/group/${consumerGroupId}/offsetsdelete`}
-                  className="btn btn-secondary mr-2"
-                >
-                  Delete Offsets
-                </Link>
-              )}
-              {roles.group['group/offsets/update'] && (
-                <Link
-                  to={`/ui/${clusterId}/group/${consumerGroupId}/offsets`}
-                  className="btn btn-primary"
-                >
-                  Update Offsets
-                </Link>
-              )}
-            </li>
-          </aside>
-        )}
+        {roles.group &&
+          (roles.group['group/offsets/delete'] || roles.group['group/offsets/update']) && (
+            <aside>
+              <li className="aside-button">
+                {roles.group['group/offsets/delete'] && (
+                  <Link
+                    to={`/ui/${clusterId}/group/${consumerGroupId}/offsetsdelete`}
+                    className="btn btn-secondary mr-2"
+                  >
+                    Delete Offsets
+                  </Link>
+                )}
+                {roles.group['group/offsets/update'] && (
+                  <Link
+                    to={`/ui/${clusterId}/group/${consumerGroupId}/offsets`}
+                    className="btn btn-primary"
+                  >
+                    Update Offsets
+                  </Link>
+                )}
+              </li>
+            </aside>
+          )}
       </div>
     );
   }
 }
 
+ConsumerGroup.propTypes = {
+  history: PropTypes.object,
+  match: PropTypes.object,
+  location: PropTypes.object,
+  clusters: PropTypes.array,
+  children: PropTypes.any
+};
+
 export default ConsumerGroup;
diff --git a/client/src/containers/ConsumerGroup/ConsumerGroupDetail/ConsumerGroupAcls/ConsumerGroupAcls.jsx b/client/src/containers/ConsumerGroup/ConsumerGroupDetail/ConsumerGroupAcls/ConsumerGroupAcls.jsx
index d55167839..c82f38b38 100644
--- a/client/src/containers/ConsumerGroup/ConsumerGroupDetail/ConsumerGroupAcls/ConsumerGroupAcls.jsx
+++ b/client/src/containers/ConsumerGroup/ConsumerGroupDetail/ConsumerGroupAcls/ConsumerGroupAcls.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Table from '../../../../components/Table';
 import { uriConsumerGroupAcls } from '../../../../utils/endpoints';
-import Root from "../../../../components/Root";
+import Root from '../../../../components/Root';
 
 class TopicAcls extends Root {
   state = {
@@ -85,8 +85,8 @@ class TopicAcls extends Root {
             <tr>
               <td colSpan={3}>
                 <div className="alert alert-warning mb-0" role="alert">
-                  No ACLS found, or the "authorizer.class.name" parameter is not configured on the
-                  cluster.
+                  No ACLS found, or the &quot;authorizer.class.name&quot; parameter is not
+                  configured on the cluster.
                 </div>
               </td>
             </tr>
diff --git a/client/src/containers/ConsumerGroup/ConsumerGroupDetail/ConsumerGroupMembers/ConsumerGroupMembers.jsx b/client/src/containers/ConsumerGroup/ConsumerGroupDetail/ConsumerGroupMembers/ConsumerGroupMembers.jsx
index d2513253a..0926c10b3 100644
--- a/client/src/containers/ConsumerGroup/ConsumerGroupDetail/ConsumerGroupMembers/ConsumerGroupMembers.jsx
+++ b/client/src/containers/ConsumerGroup/ConsumerGroupDetail/ConsumerGroupMembers/ConsumerGroupMembers.jsx
@@ -4,7 +4,7 @@ import { uriConsumerGroupMembers } from '../../../../utils/endpoints';
 import constants from '../../../../utils/constants';
 import { Link } from 'react-router-dom';
 import './styles.scss';
-import Root from "../../../../components/Root";
+import Root from '../../../../components/Root';
 
 class ConsumerGroupMembers extends Root {
   state = {
@@ -40,7 +40,7 @@ class ConsumerGroupMembers extends Root {
 
   handlePartitions(partitions) {
     return partitions.map(partition => {
-      return <div className="badge badge-secondary partition">{partition}</div>;
+      return <div key={partition} className="badge badge-secondary partition">{partition}</div>;
     });
   }
 
@@ -55,7 +55,7 @@ class ConsumerGroupMembers extends Root {
         }
       });
     }
-    return topics.map(topic => {
+    return topics.map((topic, i) => {
       let partitions = [];
       assignments.forEach(assignment => {
         if (assignment.topic === topic) {
@@ -64,7 +64,7 @@ class ConsumerGroupMembers extends Root {
       });
 
       return (
-        <div
+        <div key={i}
           onClick={() => {
             history.push({
               pathname: `/ui/${this.state.selectedCluster}/topic/${topic}`,
diff --git a/client/src/containers/ConsumerGroup/ConsumerGroupDetail/ConsumerGroupOffsetDelete/ConsumerGroupOffsetDelete.jsx b/client/src/containers/ConsumerGroup/ConsumerGroupDetail/ConsumerGroupOffsetDelete/ConsumerGroupOffsetDelete.jsx
index a076fea3c..01d55febb 100644
--- a/client/src/containers/ConsumerGroup/ConsumerGroupDetail/ConsumerGroupOffsetDelete/ConsumerGroupOffsetDelete.jsx
+++ b/client/src/containers/ConsumerGroup/ConsumerGroupDetail/ConsumerGroupOffsetDelete/ConsumerGroupOffsetDelete.jsx
@@ -1,14 +1,12 @@
 import React from 'react';
 import Header from '../../../Header/Header';
-import {
-  uriConsumerGroup, uriDeleteGroupOffsets,
-} from '../../../../utils/endpoints';
+import { uriConsumerGroup, uriDeleteGroupOffsets } from '../../../../utils/endpoints';
 import 'react-toastify/dist/ReactToastify.css';
-import Root from "../../../../components/Root";
-import Table from "../../../../components/Table";
-import constants from "../../../../utils/constants";
-import ConfirmModal from "../../../../components/Modal/ConfirmModal";
-import {toast} from "react-toastify";
+import Root from '../../../../components/Root';
+import Table from '../../../../components/Table';
+import constants from '../../../../utils/constants';
+import ConfirmModal from '../../../../components/Modal/ConfirmModal';
+import { toast } from 'react-toastify';
 
 class ConsumerGroupOffsetDelete extends Root {
   state = {
@@ -17,13 +15,13 @@ class ConsumerGroupOffsetDelete extends Root {
     topicIds: [],
     deleteAllOffsetsForTopic: '',
     showDeleteModal: false,
-    deleteMessage: '',
+    deleteMessage: ''
   };
 
   componentDidMount() {
-    const {clusterId, consumerGroupId} = this.props.match.params;
+    const { clusterId, consumerGroupId } = this.props.match.params;
 
-    this.setState({clusterId, consumerGroupId}, () => {
+    this.setState({ clusterId, consumerGroupId }, () => {
       this.getTopics();
     });
   }
@@ -54,15 +52,20 @@ class ConsumerGroupOffsetDelete extends Root {
     const { clusterId, consumerGroupId, deleteAllOffsetsForTopic } = this.state;
     this.removeApi(uriDeleteGroupOffsets(clusterId, consumerGroupId, deleteAllOffsetsForTopic))
       .then(() => {
-        toast.success(`Offsets for topic '${deleteAllOffsetsForTopic}' and consumer group '${consumerGroupId}' are deleted`);
-        this.setState({ showDeleteModal: false, deleteMessage: '', deleteAllOffsetsForTopic: '' }, () => {
-          this.getTopics();
-        });
+        toast.success(
+          `Offsets for topic '${deleteAllOffsetsForTopic}' and consumer group '${consumerGroupId}' are deleted`
+        );
+        this.setState(
+          { showDeleteModal: false, deleteMessage: '', deleteAllOffsetsForTopic: '' },
+          () => {
+            this.getTopics();
+          }
+        );
       })
       .catch(() => {
         this.setState({ showDeleteModal: false, deleteMessage: '', deleteAllOffsetsForTopic: '' });
       });
-  }
+  };
 
   handleOnDelete(topicId) {
     this.setState({ deleteAllOffsetsForTopic: topicId }, () => {
@@ -75,13 +78,12 @@ class ConsumerGroupOffsetDelete extends Root {
   }
 
   render() {
-    const {consumerGroupId} = this.state;
+    const { consumerGroupId } = this.state;
 
     return (
       <div>
         <div>
-          <Header title={`Delete offsets: ${consumerGroupId}`}
-                  history={this.props.history}/>
+          <Header title={`Delete offsets: ${consumerGroupId}`} history={this.props.history} />
         </div>
         <div>
           <Table
@@ -93,7 +95,7 @@ class ConsumerGroupOffsetDelete extends Root {
                 colName: 'Topic',
                 type: 'text',
                 sortable: true
-              },
+              }
             ]}
             data={this.state.topicIds}
             noContent={
@@ -105,12 +107,10 @@ class ConsumerGroupOffsetDelete extends Root {
                 </td>
               </tr>
             }
-            onDelete={(row) => {
-              this.handleOnDelete(row.topic)
+            onDelete={row => {
+              this.handleOnDelete(row.topic);
             }}
-            actions={
-              [constants.TABLE_DELETE]
-            }
+            actions={[constants.TABLE_DELETE]}
           />
         </div>
         <ConfirmModal
diff --git a/client/src/containers/ConsumerGroup/ConsumerGroupDetail/ConsumerGroupTopics/ConsumerGroupTopics.jsx b/client/src/containers/ConsumerGroup/ConsumerGroupDetail/ConsumerGroupTopics/ConsumerGroupTopics.jsx
index b68b20749..093355e2b 100644
--- a/client/src/containers/ConsumerGroup/ConsumerGroupDetail/ConsumerGroupTopics/ConsumerGroupTopics.jsx
+++ b/client/src/containers/ConsumerGroup/ConsumerGroupDetail/ConsumerGroupTopics/ConsumerGroupTopics.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import Table from '../../../../components/Table';
 import { uriConsumerGroupOffsets } from '../../../../utils/endpoints';
 import { Link } from 'react-router-dom';
-import Root from "../../../../components/Root";
+import Root from '../../../../components/Root';
 
 class ConsumerGroupTopics extends Root {
   state = {
@@ -92,7 +92,13 @@ class ConsumerGroupTopics extends Root {
               cell: obj => {
                 if (obj.offset !== undefined && obj.offset !== '') {
                   return (
-                    <Link to={`/ui/${this.state.selectedCluster}/topic/${obj.name}/data?sort=Oldest&partition=${obj.partition}&after=${obj.partition}-${obj.offset - 1}`}>
+                    <Link
+                      to={`/ui/${this.state.selectedCluster}/topic/${
+                        obj.name
+                      }/data?sort=Oldest&partition=${obj.partition}&after=${obj.partition}-${
+                        obj.offset - 1
+                      }`}
+                    >
                       {obj.offset}
                     </Link>
                   );
diff --git a/client/src/containers/ConsumerGroup/ConsumerGroupList/ConsumerGroupList.jsx b/client/src/containers/ConsumerGroup/ConsumerGroupList/ConsumerGroupList.jsx
index 20f407e78..a65e6ebd7 100644
--- a/client/src/containers/ConsumerGroup/ConsumerGroupList/ConsumerGroupList.jsx
+++ b/client/src/containers/ConsumerGroup/ConsumerGroupList/ConsumerGroupList.jsx
@@ -9,9 +9,9 @@ import Pagination from '../../../components/Pagination';
 import ConfirmModal from '../../../components/Modal/ConfirmModal';
 import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-import Root from "../../../components/Root";
-import {Link} from "react-router-dom";
-import {handlePageChange, getPageNumber} from "./../../../utils/pagination"
+import Root from '../../../components/Root';
+import {Link} from 'react-router-dom';
+import {handlePageChange, getPageNumber} from './../../../utils/pagination'
 
 class ConsumerGroupList extends Root {
   state = {
diff --git a/client/src/containers/Header/Header.jsx b/client/src/containers/Header/Header.jsx
index a06db742a..0729973dd 100644
--- a/client/src/containers/Header/Header.jsx
+++ b/client/src/containers/Header/Header.jsx
@@ -6,7 +6,7 @@ import { logout } from '../../utils/api';
 import { uriCurrentUser, uriLogout } from '../../utils/endpoints';
 import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-import Root from "../../components/Root";
+import Root from '../../components/Root';
 
 class Header extends Root {
   state = {
diff --git a/client/src/containers/Loading/Loading.jsx b/client/src/containers/Loading/Loading.jsx
index 9f7bf94df..b9c86ece8 100644
--- a/client/src/containers/Loading/Loading.jsx
+++ b/client/src/containers/Loading/Loading.jsx
@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import './styles.scss';
 import image from '../../images/icon.svg';
+
 class Loading extends Component {
   render() {
     const { show } = this.props;
@@ -24,4 +26,9 @@ class Loading extends Component {
   }
 }
 
+Loading.propTypes = {
+  show: PropTypes.bool,
+  children: PropTypes.any,
+}
+
 export default Loading;
diff --git a/client/src/containers/Login/Login.jsx b/client/src/containers/Login/Login.jsx
index e4579c65c..e9632bfb4 100644
--- a/client/src/containers/Login/Login.jsx
+++ b/client/src/containers/Login/Login.jsx
@@ -24,12 +24,8 @@ class Login extends Form {
   };
 
   schema = {
-    username: Joi.string()
-      .required()
-      .label('Username'),
-    password: Joi.string()
-      .required()
-      .label('Password')
+    username: Joi.string().required().label('Username'),
+    password: Joi.string().required().label('Password')
   };
 
   login() {
@@ -41,10 +37,9 @@ class Login extends Form {
         password: formData.password
       };
 
-      login(uriLogin(), body)
-        .then(() => {
-          this.getData();
-        });
+      login(uriLogin(), body).then(() => {
+        this.getData();
+      });
     } catch (err) {
       toast.error('Wrong Username or Password!');
     }
@@ -63,7 +58,7 @@ class Login extends Form {
       sessionStorage.removeItem('returnTo');
 
       this.props.history.push({
-        pathname: (returnTo || '/ui'),
+        pathname: returnTo || '/ui'
       });
 
       window.location.reload(true);
@@ -75,11 +70,11 @@ class Login extends Form {
   componentDidMount() {
     const auths = JSON.parse(sessionStorage.getItem('auths'));
     if (auths && auths.loginEnabled) {
-      const { loginEnabled, ...config } = auths;
+      const { ...config } = auths;
       this.setState({ config });
     } else {
       this.props.history.push({
-        pathname: '/ui',
+        pathname: '/ui'
       });
     }
   }
@@ -154,8 +149,10 @@ class Login extends Form {
   }
 
   _renderOidc(oidcsAuths) {
-    return oidcsAuths.map(auth => (
-      <a href={uriOidc(auth.key)} className="btn btn-primary btn-block">{auth.label}</a>
+    return oidcsAuths.map((auth, i) => (
+      <a key={i} href={uriOidc(auth.key)} className="btn btn-primary btn-block">
+        {auth.label}
+      </a>
     ));
   }
 
diff --git a/client/src/containers/Node/NodeDetail/Node.jsx b/client/src/containers/Node/NodeDetail/Node.jsx
index baa6841ed..9c67e4301 100644
--- a/client/src/containers/Node/NodeDetail/Node.jsx
+++ b/client/src/containers/Node/NodeDetail/Node.jsx
@@ -1,9 +1,10 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import Header from '../../Header';
 import NodeConfigs from './/NodeConfigs/NodeConfigs';
 import NodeLogs from './/NodeLogs/NodeLogs';
-import {getSelectedTab} from "../../../utils/functions";
-import {Link} from "react-router-dom";
+import { getSelectedTab } from '../../../utils/functions';
+import { Link } from 'react-router-dom';
 
 class Node extends Component {
   state = {
@@ -21,16 +22,16 @@ class Node extends Component {
     const { clusterId, nodeId } = this.props.match.params;
     const tabSelected = getSelectedTab(this.props, this.tabs);
     this.setState(
-        {
-          selectedTab: (tabSelected)? tabSelected : 'configs'
-        },
-        () => {
-          this.props.history.replace(`/ui/${clusterId}/node/${nodeId}/${this.state.selectedTab}`);
-        }
+      {
+        selectedTab: tabSelected ? tabSelected : 'configs'
+      },
+      () => {
+        this.props.history.replace(`/ui/${clusterId}/node/${nodeId}/${this.state.selectedTab}`);
+      }
     );
   }
 
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate(prevProps) {
     if (this.props.location.pathname !== prevProps.location.pathname) {
       const tabSelected = getSelectedTab(this.props, this.tabs);
       this.setState({ selectedTab: tabSelected });
@@ -81,14 +82,16 @@ class Node extends Component {
         <div className="tabs-container">
           <ul className="nav nav-tabs" role="tablist">
             <li className="nav-item">
-              <Link to={`/ui/${clusterId}/node/${selectedNode}/configs`}
+              <Link
+                to={`/ui/${clusterId}/node/${selectedNode}/configs`}
                 className={this.tabClassName('configs')}
               >
                 Configs
               </Link>
             </li>
             <li className="nav-item">
-              <Link to={`/ui/${clusterId}/node/${selectedNode}/logs`}
+              <Link
+                to={`/ui/${clusterId}/node/${selectedNode}/logs`}
                 className={this.tabClassName('logs')}
               >
                 Logs
@@ -107,4 +110,12 @@ class Node extends Component {
   }
 }
 
+Node.propTypes = {
+  history: PropTypes.object,
+  match: PropTypes.object,
+  location: PropTypes.object,
+  clusters: PropTypes.array,
+  children: PropTypes.any
+};
+
 export default Node;
diff --git a/client/src/containers/Node/NodeDetail/NodeLogs/NodeLogs.jsx b/client/src/containers/Node/NodeDetail/NodeLogs/NodeLogs.jsx
index 836fa04cd..6da7eb470 100644
--- a/client/src/containers/Node/NodeDetail/NodeLogs/NodeLogs.jsx
+++ b/client/src/containers/Node/NodeDetail/NodeLogs/NodeLogs.jsx
@@ -3,7 +3,7 @@ import { uriNodesLogs } from '../../../../utils/endpoints';
 import Table from '../../../../components/Table';
 import { showBytes } from '../../../../utils/converters';
 import { sortBy } from '../../../../utils/constants';
-import Root from "../../../../components/Root";
+import Root from '../../../../components/Root';
 
 class NodeLogs extends Root {
   state = {
diff --git a/client/src/containers/Node/NodeList/NodesList.jsx b/client/src/containers/Node/NodeList/NodesList.jsx
index 759cf7150..33e577286 100644
--- a/client/src/containers/Node/NodeList/NodesList.jsx
+++ b/client/src/containers/Node/NodeList/NodesList.jsx
@@ -2,8 +2,7 @@ import React from 'react';
 import Header from '../../Header';
 import Table from '../../../components/Table';
 import * as constants from '../../../utils/constants';
-import { uriNodes } from '../../../utils/endpoints';
-import { uriNodePartitions } from '../../../utils/endpoints';
+import { uriNodes, uriNodePartitions } from '../../../utils/endpoints';
 import Root from '../../../components/Root';
 
 class NodesList extends Root {
diff --git a/client/src/containers/Schema/SchemaDetail/Schema.jsx b/client/src/containers/Schema/SchemaDetail/Schema.jsx
index 3a1ef8cb6..4e372e564 100644
--- a/client/src/containers/Schema/SchemaDetail/Schema.jsx
+++ b/client/src/containers/Schema/SchemaDetail/Schema.jsx
@@ -3,9 +3,9 @@ import Header from '../../Header';
 import SchemaVersions from './SchemaVersions';
 import SchemaUpdate from './SchemaUpdate';
 import endpoints from '../../../utils/endpoints';
-import {getSelectedTab} from "../../../utils/functions";
-import {Link} from "react-router-dom";
-import Root from "../../../components/Root";
+import { getSelectedTab } from '../../../utils/functions';
+import { Link } from 'react-router-dom';
+import Root from '../../../components/Root';
 
 class Schema extends Root {
   state = {
@@ -23,7 +23,7 @@ class Schema extends Root {
     this.getSchemaVersions();
   }
 
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate(prevProps) {
     if (this.props.location.pathname !== prevProps.location.pathname) {
       const tabSelected = getSelectedTab(this.props, this.tabs);
       this.setState({ selectedTab: tabSelected });
@@ -40,19 +40,23 @@ class Schema extends Root {
     const { clusterId, schemaId, roles } = this.state;
     let tabSelected = getSelectedTab(this.props, this.tabs);
 
-    if(!roles.registry['registry/update'] && tabSelected === 'update') {
+    if (!roles.registry['registry/update'] && tabSelected === 'update') {
       tabSelected = 'versions';
     }
 
     schemas = await this.getApi(endpoints.uriSchemaVersions(clusterId, schemaId));
-    this.setState({
-          schemaVersions: schemas.data,
-          totalVersions: schemas.data.length,
-          selectedTab: tabSelected === 'versions' ? tabSelected : 'update'
-        },
-        () => {
-          this.props.history.replace(`/ui/${clusterId}/schema/details/${schemaId}/${this.state.selectedTab}`);
-        });
+    this.setState(
+      {
+        schemaVersions: schemas.data,
+        totalVersions: schemas.data.length,
+        selectedTab: tabSelected === 'versions' ? tabSelected : 'update'
+      },
+      () => {
+        this.props.history.replace(
+          `/ui/${clusterId}/schema/details/${schemaId}/${this.state.selectedTab}`
+        );
+      }
+    );
   }
 
   renderSelectedTab() {
@@ -64,33 +68,35 @@ class Schema extends Root {
     switch (selectedTab) {
       case 'update':
         return (
-            <SchemaUpdate
-                getSchemaVersions={() => {
-                  this.getSchemaVersions();
-                }}
-                schemaId={schemaId}
-                history={history}
-                match={match}
-            />
+          <SchemaUpdate
+            getSchemaVersions={() => {
+              this.getSchemaVersions();
+            }}
+            schemaId={schemaId}
+            history={history}
+            match={match}
+          />
         );
       case 'versions':
         return (
-            <SchemaVersions
-                schemaName={schemaId}
-                clusterId={clusterId}
-                schemas={schemaVersions}
-                history={history}
-                match={match}
-            />
+          <SchemaVersions
+            schemaName={schemaId}
+            clusterId={clusterId}
+            schemas={schemaVersions}
+            history={history}
+            match={match}
+          />
         );
       default:
-        return <SchemaVersions
+        return (
+          <SchemaVersions
             schemaName={schemaId}
             clusterId={clusterId}
             schemas={schemaVersions}
             history={history}
             match={match}
-        />;
+          />
+        );
     }
   }
 
@@ -98,34 +104,37 @@ class Schema extends Root {
     const { clusterId, schemaId, totalVersions, roles } = this.state;
 
     return (
-        <div>
-          <Header title={`Schema: ${schemaId}`} history={this.props.history} />
-          <div className="tabs-container">
-            <ul className="nav nav-tabs" role="tablist">
-              {roles.registry['registry/update'] && (
-                  <li className="nav-item">
-                    <Link to={`/ui/${clusterId}/schema/details/${schemaId}/update`}
-                          className={this.tabClassName('update')}
-                    >
-                      Update
-                    </Link>
-                  </li>)}
+      <div>
+        <Header title={`Schema: ${schemaId}`} history={this.props.history} />
+        <div className="tabs-container">
+          <ul className="nav nav-tabs" role="tablist">
+            {roles.registry['registry/update'] && (
               <li className="nav-item">
-                <Link to={`/ui/${clusterId}/schema/details/${schemaId}/versions`}
-                      className={this.tabClassName('versions')}
+                <Link
+                  to={`/ui/${clusterId}/schema/details/${schemaId}/update`}
+                  className={this.tabClassName('update')}
                 >
-                  Versions <span className="badge badge-secondary">{totalVersions}</span>
+                  Update
                 </Link>
               </li>
-            </ul>
+            )}
+            <li className="nav-item">
+              <Link
+                to={`/ui/${clusterId}/schema/details/${schemaId}/versions`}
+                className={this.tabClassName('versions')}
+              >
+                Versions <span className="badge badge-secondary">{totalVersions}</span>
+              </Link>
+            </li>
+          </ul>
 
-            <div className="tab-content">
-              <div className="tab-pane active" role="tabpanel">
-                {this.renderSelectedTab()}
-              </div>
+          <div className="tab-content">
+            <div className="tab-pane active" role="tabpanel">
+              {this.renderSelectedTab()}
             </div>
           </div>
         </div>
+      </div>
     );
   }
 }
diff --git a/client/src/containers/Schema/SchemaDetail/SchemaUpdate/SchemaUpdate.jsx b/client/src/containers/Schema/SchemaDetail/SchemaUpdate/SchemaUpdate.jsx
index c225f2122..3def6931c 100644
--- a/client/src/containers/Schema/SchemaDetail/SchemaUpdate/SchemaUpdate.jsx
+++ b/client/src/containers/Schema/SchemaDetail/SchemaUpdate/SchemaUpdate.jsx
@@ -50,19 +50,11 @@ class SchemaUpdate extends Form {
   };
 
   schema = {
-    subject: Joi.string()
-        .required()
-        .label('Subject'),
-    compatibility: Joi.string()
-        .required()
-        .label('Compatibility Level'),
-    schema: Joi.string()
-        .required()
-        .label('Latest Schema'),
-    schemaType: Joi.string()
-        .label('Schema Type'),
-    references: Joi.any()
-        .label('Refecences')
+    subject: Joi.string().required().label('Subject'),
+    compatibility: Joi.string().required().label('Compatibility Level'),
+    schema: Joi.string().required().label('Latest Schema'),
+    schemaType: Joi.string().label('Schema Type'),
+    references: Joi.any().label('Refecences')
   };
 
   componentDidMount() {
@@ -87,7 +79,10 @@ class SchemaUpdate extends Form {
     formData.subject = latestSchemaVersion.subject;
     formData.compatibility = latestSchemaVersion.compatibilityLevel;
     formData.schemaType = latestSchemaVersion.schemaType;
-    formData.schema = "PROTOBUF" === formData.schemaType?latestSchemaVersion.schema :JSON.stringify(JSON.parse(latestSchemaVersion.schema), null, 2);
+    formData.schema =
+      'PROTOBUF' === formData.schemaType
+        ? latestSchemaVersion.schema
+        : JSON.stringify(JSON.parse(latestSchemaVersion.schema), null, 2);
     formData.references = latestSchemaVersion.references;
 
     this.setState(formData);
@@ -104,57 +99,59 @@ class SchemaUpdate extends Form {
       references: formData.references
     };
 
-    this.postApi(uriUpdateSchema(clusterId, formData.subject), body)
-        .then(() => {
-          toast.success(`Schema '${formData.subject}' is updated`);
-          this.props.getSchemaVersions();
-          window.location.reload(false);
-        });
+    this.postApi(uriUpdateSchema(clusterId, formData.subject), body).then(() => {
+      toast.success(`Schema '${formData.subject}' is updated`);
+      this.props.getSchemaVersions();
+      window.location.reload(false);
+    });
   }
 
   render() {
     const { compatibilityOptions, roles } = this.state;
 
     return (
-        <form
-            encType="multipart/form-data"
-            className="khq-form khq-form-config"
-            onSubmit={e => this.handleSubmit(e)}
-        >
-          <fieldset>
-            {this.renderInput(
-                'subject',
-                'Subject',
-                'Subject',
-                undefined,
-                undefined,
-                false,
-                false,
-                false,
-                { disabled: true }
-            )}
-            {this.renderSelect(
-                'compatibility',
-                'Compatibility Level',
-                compatibilityOptions,
-                ({ currentTarget: input }) => {
-                  let { formData } = { ...this.state };
-                  formData.compatibility = input.value;
-                  this.setState({ formData });
-                },
-                'col-sm-10'
-            )}
-            {this.renderJSONInput('schema', 'Latest Schema', value => {
-                  let { formData } = { ...this.state };
-                  formData.schema = value;
-                  this.setState({ formData });
-                },
-                'col-sm-10'
-            )}
-            {roles.registry['registry/update'] && (
-                this.renderButton('Update', undefined, undefined, 'submit'))}
-          </fieldset>
-        </form>
+      <form
+        encType="multipart/form-data"
+        className="khq-form khq-form-config"
+        onSubmit={e => this.handleSubmit(e)}
+      >
+        <fieldset>
+          {this.renderInput(
+            'subject',
+            'Subject',
+            'Subject',
+            undefined,
+            undefined,
+            false,
+            false,
+            false,
+            { disabled: true }
+          )}
+          {this.renderSelect(
+            'compatibility',
+            'Compatibility Level',
+            compatibilityOptions,
+            ({ currentTarget: input }) => {
+              let { formData } = { ...this.state };
+              formData.compatibility = input.value;
+              this.setState({ formData });
+            },
+            'col-sm-10'
+          )}
+          {this.renderJSONInput(
+            'schema',
+            'Latest Schema',
+            value => {
+              let { formData } = { ...this.state };
+              formData.schema = value;
+              this.setState({ formData });
+            },
+            'col-sm-10'
+          )}
+          {roles.registry['registry/update'] &&
+            this.renderButton('Update', undefined, undefined, 'submit')}
+        </fieldset>
+      </form>
     );
   }
 }
diff --git a/client/src/containers/Schema/SchemaDetail/SchemaVersions/SchemaVersions.jsx b/client/src/containers/Schema/SchemaDetail/SchemaVersions/SchemaVersions.jsx
index 0e4367734..e162c14fe 100644
--- a/client/src/containers/Schema/SchemaDetail/SchemaVersions/SchemaVersions.jsx
+++ b/client/src/containers/Schema/SchemaDetail/SchemaVersions/SchemaVersions.jsx
@@ -9,7 +9,7 @@ import 'react-toastify/dist/ReactToastify.css';
 import 'ace-builds/webpack-resolver';
 import 'ace-builds/src-noconflict/mode-json';
 import 'ace-builds/src-noconflict/theme-merbivore_soft';
-import Root from "../../../../components/Root";
+import Root from '../../../../components/Root';
 
 class SchemaVersions extends Root {
   state = {
@@ -29,14 +29,16 @@ class SchemaVersions extends Root {
   }
 
   handleData(schemas) {
-
     if (schemas) {
       let data = schemas.map(schema => {
         return {
           id: schema.id,
           version: schema.version,
           schemaType: schema.schemaType,
-          schema: "PROTOBUF" === schema.schemaType ? schema.schema : JSON.stringify(JSON.parse(schema.schema), null, 2)
+          schema:
+            'PROTOBUF' === schema.schemaType
+              ? schema.schema
+              : JSON.stringify(JSON.parse(schema.schema), null, 2)
         };
       });
       this.setState({ data, loading: false });
@@ -82,7 +84,7 @@ class SchemaVersions extends Root {
       uriDeleteSchemaVersion(selectedCluster, selectedSchema, schemaToDelete.version),
       deleteData
     )
-      .then(res => {
+      .then(() => {
         toast.success(`Version'${schemaToDelete.version}' is deleted`);
         this.setState({ showDeleteModal: false, schemaToDelete: {} });
         history.push({
@@ -145,7 +147,9 @@ class SchemaVersions extends Root {
                 return (
                   <pre className="mb-0 khq-data-highlight">
                     <code>
-                    {obj["schemaType"] === "PROTOBUF" ? obj[col.accessor] : JSON.stringify(JSON.parse(obj[col.accessor]))}
+                      {obj['schemaType'] === 'PROTOBUF'
+                        ? obj[col.accessor]
+                        : JSON.stringify(JSON.parse(obj[col.accessor]))}
                     </code>
                   </pre>
                 );
@@ -167,9 +171,10 @@ class SchemaVersions extends Root {
           extraRow
           noStripes
           onExpand={obj => {
-            return Object.keys(obj.headers).map(header => {
+            return Object.keys(obj.headers).map((header, i) => {
               return (
                 <tr
+                  key={i}
                   style={{
                     display: 'flex',
                     flexDirection: 'row',
@@ -209,7 +214,6 @@ class SchemaVersions extends Root {
           handleConfirm={this.deleteSchemaRegistry}
           message={this.state.deleteMessage}
         />
-
       </div>
     );
   }
diff --git a/client/src/containers/Schema/SchemaList/SchemaList.jsx b/client/src/containers/Schema/SchemaList/SchemaList.jsx
index bc8a99720..929d3bb63 100644
--- a/client/src/containers/Schema/SchemaList/SchemaList.jsx
+++ b/client/src/containers/Schema/SchemaList/SchemaList.jsx
@@ -15,9 +15,8 @@ import 'ace-builds/src-noconflict/mode-protobuf';
 import 'ace-builds/src-noconflict/theme-merbivore_soft';
 import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-import Root from "../../../components/Root";
-import {handlePageChange, getPageNumber} from "./../../../utils/pagination"
-
+import Root from '../../../components/Root';
+import { handlePageChange, getPageNumber } from './../../../utils/pagination';
 
 class SchemaList extends Root {
   state = {
@@ -45,15 +44,18 @@ class SchemaList extends Root {
   componentDidMount() {
     let { clusterId } = this.props.match.params;
     const { searchData, pageNumber } = this.state;
-    const query =  new URLSearchParams(this.props.location.search);
+    const query = new URLSearchParams(this.props.location.search);
 
-    this.setState({
-      selectedCluster: clusterId,
-      searchData: { search: (query.get('search'))? query.get('search') : searchData.search },
-      pageNumber: (query.get('page'))? parseInt(query.get('page')) : parseInt(pageNumber)
-    }, () => {
-      this.getSchemaRegistry();
-    });
+    this.setState(
+      {
+        selectedCluster: clusterId,
+        searchData: { search: query.get('search') ? query.get('search') : searchData.search },
+        pageNumber: query.get('page') ? parseInt(query.get('page')) : parseInt(pageNumber)
+      },
+      () => {
+        this.getSchemaRegistry();
+      }
+    );
   }
 
   handleSearch = data => {
@@ -65,13 +67,12 @@ class SchemaList extends Root {
 
   handlePageChangeSubmission = value => {
     let pageNumber = parseInt(getPageNumber(value, this.state.totalPageNumber));
-    this.setState({pageNumber: pageNumber}, () => {
+    this.setState({ pageNumber: pageNumber }, () => {
       this.getSchemaRegistry();
-    })
-  }
+    });
+  };
 
   async getSchemaRegistry() {
-
     const { selectedCluster, pageNumber } = this.state;
     const { search } = this.state.searchData;
 
@@ -88,12 +89,11 @@ class SchemaList extends Root {
         this.props.history.push({
           pathname: `/ui/${this.state.selectedCluster}/schema`,
           search: `search=${this.state.searchData.search}&page=${pageNumber}`
-        })
+        });
       });
     } else {
       this.setState({ selectedCluster, schemasRegistry: [], totalPageNumber: 0, loading: false });
     }
-
   }
 
   handleSchemaRegistry(schemas) {
@@ -108,7 +108,12 @@ class SchemaList extends Root {
         version: schema.version,
         exception: schema.exception,
         schemaType: schema.schemaType,
-        schema: schema.schemaType === "PROTOBUF" ? schema.schema : (schema.schema ? JSON.stringify(JSON.parse(schema.schema), null, 2) : null)
+        schema:
+          schema.schemaType === 'PROTOBUF'
+            ? schema.schema
+            : schema.schema
+            ? JSON.stringify(JSON.parse(schema.schema), null, 2)
+            : null
       });
     });
     this.setState({ schemasRegistry: tableSchemaRegistry, loading: false });
@@ -150,13 +155,7 @@ class SchemaList extends Root {
       });
   };
   render() {
-    const {
-      selectedCluster,
-      searchData,
-      pageNumber,
-      totalPageNumber,
-      loading
-    } = this.state;
+    const { selectedCluster, searchData, pageNumber, totalPageNumber, loading } = this.state;
     const roles = this.state.roles || {};
     const { history } = this.props;
     const { clusterId } = this.props.match.params;
@@ -224,7 +223,7 @@ class SchemaList extends Root {
               extraRowContent: (obj, col, index) => {
                 return (
                   <AceEditor
-                    mode={ obj.schemaType === "PROTOBUF"? "protobuf"  : "json"}
+                    mode={obj.schemaType === 'PROTOBUF' ? 'protobuf' : 'json'}
                     id={'value' + index}
                     theme="merbivore_soft"
                     value={obj[col.accessor]}
@@ -240,7 +239,9 @@ class SchemaList extends Root {
                   return (
                     <pre className="mb-0 khq-data-highlight">
                       <code>
-                        { obj.schemaType === "PROTOBUF"? obj[col.accessor] : JSON.stringify(JSON.parse(obj[col.accessor]))}
+                        {obj.schemaType === 'PROTOBUF'
+                          ? obj[col.accessor]
+                          : JSON.stringify(JSON.parse(obj[col.accessor]))}
                       </code>
                     </pre>
                   );
@@ -316,7 +317,6 @@ class SchemaList extends Root {
           handleConfirm={this.deleteSchemaRegistry}
           message={this.state.deleteMessage}
         />
-
       </div>
     );
   }
diff --git a/client/src/containers/SideBar/Sidebar.jsx b/client/src/containers/SideBar/Sidebar.jsx
index 964fb9f8f..40f277a06 100644
--- a/client/src/containers/SideBar/Sidebar.jsx
+++ b/client/src/containers/SideBar/Sidebar.jsx
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { Link, withRouter } from 'react-router-dom';
 import { matchPath } from 'react-router';
 import constants from '../../utils/constants';
@@ -332,4 +333,15 @@ class Sidebar extends Component {
   }
 }
 
+Sidebar.propTypes = {
+  history: PropTypes.object,
+  match: PropTypes.object,
+  location: PropTypes.object,
+  clusters: PropTypes.array,
+  children: PropTypes.any,
+  expanded: PropTypes.bool,
+  toggleSidebar: PropTypes.func,
+  selectedTab: PropTypes.string,
+}
+
 export default withRouter(Sidebar);
diff --git a/client/src/containers/Tail/Tail.jsx b/client/src/containers/Tail/Tail.jsx
index 12e1661ee..afd632e4b 100644
--- a/client/src/containers/Tail/Tail.jsx
+++ b/client/src/containers/Tail/Tail.jsx
@@ -39,13 +39,13 @@ class Tail extends Root {
 
   componentDidMount = async () => {
     const { clusterId } = this.props.match.params;
-    const query =  new URLSearchParams(this.props.location.search);
+    const query = new URLSearchParams(this.props.location.search);
 
     let data = await this.getApi(uriTopicsName(clusterId));
     data = data.data;
     let topics = [];
     if (query && query.get('topicId')) {
-      topics = [ query.get('topicId') ];
+      topics = [query.get('topicId')];
     }
 
     if (data) {
@@ -65,17 +65,17 @@ class Tail extends Root {
     }
 
     this.initDateTimeFormat();
-  }
+  };
 
   initDateTimeFormat = async () => {
     const { clusterId } = this.props.match.params;
-    const uiOptions = await getClusterUIOptions(clusterId)
-    if(uiOptions.topicData && uiOptions.topicData.dateTimeFormat) {
-      this.setState(({
+    const uiOptions = await getClusterUIOptions(clusterId);
+    if (uiOptions.topicData && uiOptions.topicData.dateTimeFormat) {
+      this.setState({
         dateTimeFormat: uiOptions.topicData.dateTimeFormat
-      }));
+      });
     }
-  }
+  };
 
   componentWillUnmount = () => {
     super.componentWillUnmount();
@@ -89,11 +89,10 @@ class Tail extends Root {
       uriLiveTail(clusterId, search, selectedTopics, JSON.stringify(maxRecords))
     );
     let self = this;
-    this.eventSource.addEventListener('tailBody', function(e) {
+    this.eventSource.addEventListener('tailBody', function (e) {
       let res = JSON.parse(e.data);
       let { data } = self.state;
 
-
       if (res.records) {
         data = data.concat(res.records);
         if (data.length > maxRecords) {
@@ -105,7 +104,7 @@ class Tail extends Root {
       self.scrollToBottom();
     });
 
-    this.eventSource.onerror = e => {
+    this.eventSource.onerror = () => {
       this.setState({ selectedStatus: STATUS.STOPPED });
     };
   };
@@ -119,13 +118,14 @@ class Tail extends Root {
   };
 
   scrollToBottom = () => {
-    const followScroll = (document.body.scrollTop || document.documentElement.scrollTop) + window.innerHeight >=
-        (document.documentElement.scrollHeight - document.documentElement.clientHeight)
+    const followScroll =
+      (document.body.scrollTop || document.documentElement.scrollTop) + window.innerHeight >=
+      document.documentElement.scrollHeight - document.documentElement.clientHeight;
 
     if (followScroll) {
       this.messagesEnd.scrollIntoView({ behavior: 'smooth' });
     }
-  }
+  };
 
   handleChange = e => {
     this.setState({ [e.target.name]: [e.target.value] });
@@ -422,10 +422,10 @@ class Tail extends Root {
                 cell: obj => {
                   return (
                     <div className="tail-headers">
-                      <DateTime 
-                        isoDateTimeString={obj.timestamp} 
+                      <DateTime
+                        isoDateTimeString={obj.timestamp}
                         dateTimeFormat={this.state.dateTimeFormat}
-                      />                
+                      />
                     </div>
                   );
                 }
@@ -493,9 +493,10 @@ class Tail extends Root {
             }}
             noContent={<tr />}
             onExpand={obj => {
-              return Object.keys(obj.headers).map(header => {
+              return Object.keys(obj.headers).map((header, i) => {
                 return (
                   <tr
+                    key={i}
                     style={{
                       display: 'flex',
                       flexDirection: 'row',
@@ -530,8 +531,11 @@ class Tail extends Root {
             }}
           />
         )}
-        <div ref={(el) => { this.messagesEnd = el; }}>
-        </div>
+        <div
+          ref={el => {
+            this.messagesEnd = el;
+          }}
+        ></div>
       </div>
     );
   }
diff --git a/client/src/containers/Topic/Topic/Topic.jsx b/client/src/containers/Topic/Topic/Topic.jsx
index 2393fd6f4..21d3c5ade 100644
--- a/client/src/containers/Topic/Topic/Topic.jsx
+++ b/client/src/containers/Topic/Topic/Topic.jsx
@@ -9,9 +9,9 @@ import TopicLogs from './TopicLogs';
 import { uriTopicsConfigs, uriTopicDataEmpty } from '../../../utils/endpoints';
 import ConfirmModal from '../../../components/Modal/ConfirmModal';
 import { toast } from 'react-toastify';
-import {getSelectedTab} from "../../../utils/functions";
+import { getSelectedTab } from '../../../utils/functions';
 import { Link } from 'react-router-dom';
-import Root from "../../../components/Root";
+import Root from '../../../components/Root';
 
 class Topic extends Root {
   state = {
@@ -27,7 +27,7 @@ class Topic extends Root {
     configs: []
   };
 
-  tabs = ['data','partitions','groups','configs','acls','logs'];
+  tabs = ['data', 'partitions', 'groups', 'configs', 'acls', 'logs'];
 
   constructor(props) {
     super(props);
@@ -55,7 +55,7 @@ class Topic extends Root {
       () => {
         this.getTopicsConfig();
         let uri = `/ui/${clusterId}/topic/${topicId}/${this.state.selectedTab}`;
-        if(searchParams) {
+        if (searchParams) {
           uri = uri + searchParams;
         }
         this.props.history.replace(uri);
@@ -66,9 +66,9 @@ class Topic extends Root {
   handleOnEmpty() {
     this.setState(() => {
       this.showDeleteModal(
-          <React.Fragment>
-            Do you want to empty the Topic: {<code>{this.state.topicId}</code>} ?
-          </React.Fragment>
+        <React.Fragment>
+          Do you want to empty the Topic: {<code>{this.state.topicId}</code>} ?
+        </React.Fragment>
       );
     });
   }
@@ -83,29 +83,27 @@ class Topic extends Root {
 
   canEmptyTopic = () => {
     const { configs } = this.state;
-    const res = configs.filter( config => config.name === 'cleanup.policy');
-    if(res && res.length === 1 && res[0].value === 'delete') return true;
+    const res = configs.filter(config => config.name === 'cleanup.policy');
+    if (res && res.length === 1 && res[0].value === 'delete') return true;
     return false;
-  }
+  };
 
   emptyTopic = () => {
     const { clusterId, topicId } = this.props.match.params;
 
-    this.removeApi(
-        uriTopicDataEmpty(clusterId, topicId)
-    )
-        .then(() => {
-          toast.success(`Topic '${topicId}' will be emptied`);
-          this.setState({ showDeleteModal: false }, () => {
-            this.topicData.current.getMessages();
-          });
-        })
-        .catch(() => {
-          this.setState({ showDeleteModal: false });
+    this.removeApi(uriTopicDataEmpty(clusterId, topicId))
+      .then(() => {
+        toast.success(`Topic '${topicId}' will be emptied`);
+        this.setState({ showDeleteModal: false }, () => {
+          this.topicData.current.getMessages();
         });
+      })
+      .catch(() => {
+        this.setState({ showDeleteModal: false });
+      });
   };
 
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate(prevProps) {
     if (this.props.location.pathname !== prevProps.location.pathname) {
       const tabSelected = getSelectedTab(this.props, this.tabs);
       this.setState({ selectedTab: tabSelected });
@@ -125,7 +123,6 @@ class Topic extends Root {
 
   selectTab = tab => {
     this.setState({ selectedTab: tab });
-
   };
 
   tabClassName = tab => {
@@ -139,17 +136,13 @@ class Topic extends Root {
 
     switch (selectedTab) {
       case 'data':
-        return <TopicData ref={this.topicData} history={history} match={match} location={location} />;
+        return (
+          <TopicData ref={this.topicData} history={history} match={match} location={location} />
+        );
       case 'partitions':
         return <TopicPartitions clusterId={clusterId} topic={topicId} history={history} />;
       case 'groups':
-        return (
-          <TopicGroups
-            clusterId={clusterId}
-            topicId={topicId}
-            history={history}
-          />
-        );
+        return <TopicGroups clusterId={clusterId} topicId={topicId} history={history} />;
       case 'configs':
         return (
           <TopicConfigs
@@ -165,7 +158,7 @@ class Topic extends Root {
         return <TopicLogs clusterId={clusterId} topic={topicId} history={history} />;
       default:
         return roles.topic && roles.topic['topic/data/read'] ? (
-          <TopicData history={history} match={match} location={location}/>
+          <TopicData history={history} match={match} location={location} />
         ) : (
           <TopicPartitions history={history} />
         );
@@ -183,7 +176,8 @@ class Topic extends Root {
           <ul className="nav nav-tabs" role="tablist">
             {roles.topic && roles.topic['topic/data/read'] && (
               <li className="nav-item">
-                <Link to={`/ui/${clusterId}/topic/${topicId}/data`}
+                <Link
+                  to={`/ui/${clusterId}/topic/${topicId}/data`}
                   className={this.tabClassName('data')}
                 >
                   Data
@@ -191,21 +185,24 @@ class Topic extends Root {
               </li>
             )}
             <li className="nav-item">
-              <Link to={`/ui/${clusterId}/topic/${topicId}/partitions`}
+              <Link
+                to={`/ui/${clusterId}/topic/${topicId}/partitions`}
                 className={this.tabClassName('partitions')}
               >
                 Partitions
               </Link>
             </li>
             <li className="nav-item">
-              <Link to={`/ui/${clusterId}/topic/${topicId}/groups`}
+              <Link
+                to={`/ui/${clusterId}/topic/${topicId}/groups`}
                 className={this.tabClassName('groups')}
               >
                 Consumer Groups
               </Link>
             </li>
             <li className="nav-item">
-              <Link to={`/ui/${clusterId}/topic/${topicId}/configs`}
+              <Link
+                to={`/ui/${clusterId}/topic/${topicId}/configs`}
                 className={this.tabClassName('configs')}
               >
                 Configs
@@ -213,7 +210,8 @@ class Topic extends Root {
             </li>
             {roles.acls && roles.acls['acls/read'] && (
               <li className="nav-item">
-                <Link to={`/ui/${clusterId}/topic/${topicId}/acls`}
+                <Link
+                  to={`/ui/${clusterId}/topic/${topicId}/acls`}
                   className={this.tabClassName('acls')}
                 >
                   ACLS
@@ -221,7 +219,8 @@ class Topic extends Root {
               </li>
             )}
             <li className="nav-item">
-              <Link to={`/ui/${clusterId}/topic/${topicId}/logs`}
+              <Link
+                to={`/ui/${clusterId}/topic/${topicId}/logs`}
                 className={this.tabClassName('logs')}
               >
                 Logs
@@ -238,46 +237,51 @@ class Topic extends Root {
         {selectedTab !== 'configs' && roles.topic && roles.topic['topic/data/insert'] && (
           <aside>
             <li className="aside-button">
-              { this.canEmptyTopic()?
-                  <div
-                      onClick={() => {
-                        this.handleOnEmpty();
-                      }}
-                      className="btn btn-secondary mr-2">
-                    <i className="fa fa-fw fa-eraser" aria-hidden={true} /> Empty Topic
-                  </div>
-                  :
-                  <div title="Only enabled for topics with Delete Cleanup Policy"
-                       className="btn disabled-black-button mr-2">
-                    <i className="fa fa-fw fa-eraser" aria-hidden={true} /> Empty Topic
-                  </div>
-              }
+              {this.canEmptyTopic() ? (
+                <div
+                  onClick={() => {
+                    this.handleOnEmpty();
+                  }}
+                  className="btn btn-secondary mr-2"
+                >
+                  <i className="fa fa-fw fa-eraser" aria-hidden={true} /> Empty Topic
+                </div>
+              ) : (
+                <div
+                  title="Only enabled for topics with Delete Cleanup Policy"
+                  className="btn disabled-black-button mr-2"
+                >
+                  <i className="fa fa-fw fa-eraser" aria-hidden={true} /> Empty Topic
+                </div>
+              )}
 
-              <Link to={{
-                pathname: `/ui/${clusterId}/topic/${topicId}/copy`
-              }}
-                    className="btn btn-secondary mr-2"
+              <Link
+                to={{
+                  pathname: `/ui/${clusterId}/topic/${topicId}/copy`
+                }}
+                className="btn btn-secondary mr-2"
               >
                 <i className="fa fa-fw fa-level-down" aria-hidden={true} /> Copy Topic
               </Link>
 
-              <Link to={{  pathname: `/ui/${clusterId}/tail`,
-                search: `?topicId=${topicId}` }} className="btn btn-secondary mr-2">
-
+              <Link
+                to={{ pathname: `/ui/${clusterId}/tail`, search: `?topicId=${topicId}` }}
+                className="btn btn-secondary mr-2"
+              >
                 <i className="fa fa-fw fa-level-down" aria-hidden={true} /> Live Tail
               </Link>
 
-              <Link to={ `/ui/${clusterId}/topic/${topicId}/produce`}
-                className="btn btn-primary">
+              <Link to={`/ui/${clusterId}/topic/${topicId}/produce`} className="btn btn-primary">
                 <i className="fa fa-plus" aria-hidden={true} /> Produce to topic
               </Link>
             </li>
           </aside>
         )}
-        <ConfirmModal show={this.state.showDeleteModal}
-                      handleCancel={this.closeDeleteModal}
-                      handleConfirm={this.emptyTopic}
-                      message={this.state.deleteMessage}
+        <ConfirmModal
+          show={this.state.showDeleteModal}
+          handleCancel={this.closeDeleteModal}
+          handleConfirm={this.emptyTopic}
+          message={this.state.deleteMessage}
         />
       </div>
     );
diff --git a/client/src/containers/Topic/Topic/TopicAcls/TopicAcls.jsx b/client/src/containers/Topic/Topic/TopicAcls/TopicAcls.jsx
index 900a00d57..1e57777b0 100644
--- a/client/src/containers/Topic/Topic/TopicAcls/TopicAcls.jsx
+++ b/client/src/containers/Topic/Topic/TopicAcls/TopicAcls.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Table from '../../../../components/Table';
 import { uriTopicsAcls } from '../../../../utils/endpoints';
-import Root from "../../../../components/Root";
+import Root from '../../../../components/Root';
 
 class TopicAcls extends Root {
   state = {
@@ -86,8 +86,8 @@ class TopicAcls extends Root {
             <tr>
               <td colSpan={3}>
                 <div className="alert alert-warning mb-0" role="alert">
-                  No ACLS found, or the "authorizer.class.name" parameter is not configured on the
-                  cluster.
+                  No ACLS found, or the &quot;authorizer.class.name&quot; parameter is not
+                  configured on the cluster.
                 </div>
               </td>
             </tr>
diff --git a/client/src/containers/Topic/Topic/TopicData/TopicData.jsx b/client/src/containers/Topic/Topic/TopicData/TopicData.jsx
index 4739b723d..a36807b92 100644
--- a/client/src/containers/Topic/Topic/TopicData/TopicData.jsx
+++ b/client/src/containers/Topic/Topic/TopicData/TopicData.jsx
@@ -8,7 +8,8 @@ import {
   uriSchemaId,
   uriTopicData,
   uriTopicDataDelete,
-  uriTopicDataSearch, uriTopicDataSingleRecord,
+  uriTopicDataSearch,
+  uriTopicDataSingleRecord,
   uriTopicsPartitions,
   basePath
 } from '../../../../utils/endpoints';
@@ -28,9 +29,9 @@ import 'react-toastify/dist/ReactToastify.css';
 import Root from '../../../../components/Root';
 import DateTime from '../../../../components/DateTime';
 import { capitalizeTxt, getClusterUIOptions } from '../../../../utils/functions';
-import { setProduceToTopicValues, setUIOptions} from '../../../../utils/localstorage';
+import { setProduceToTopicValues, setUIOptions } from '../../../../utils/localstorage';
 import Select from '../../../../components/Form/Select';
-import * as LosslessJson from 'lossless-json'
+import * as LosslessJson from 'lossless-json';
 
 class TopicData extends Root {
   state = {
@@ -42,10 +43,10 @@ class TopicData extends Root {
     offsetsOptions: [],
     timestamp: '',
     search: {
-      key: { text: '', type: 'C'},
-      value: { text: '', type: 'C'},
-      headerKey: { text: '', type: 'C'},
-      headerValue: { text: '', type: 'C'}
+      key: { text: '', type: 'C' },
+      value: { text: '', type: 'C' },
+      headerKey: { text: '', type: 'C' },
+      headerValue: { text: '', type: 'C' }
     },
     offsets: {},
     offsetsSearch: '',
@@ -82,7 +83,8 @@ class TopicData extends Root {
     {
       _id: 'E',
       name: 'Equals'
-    }];
+    }
+  ];
 
   eventSource;
 
@@ -97,32 +99,40 @@ class TopicData extends Root {
 
   async _checkProps() {
     const { clusterId, topicId } = this.props.match.params;
-    const query =  new URLSearchParams(this.props.location.search);
+    const query = new URLSearchParams(this.props.location.search);
     const uiOptions = await getClusterUIOptions(clusterId);
 
-    this.setState((prevState) =>
-        ({
-          selectedCluster: clusterId,
-          selectedTopic: topicId,
-          sortBy: (query.get('sort'))? query.get('sort') : (uiOptions && uiOptions.topicData && uiOptions.topicData.sort)?
-              uiOptions.topicData.sort : this.state.sortBy,
-          partition: (query.get('partition'))? query.get('partition') : this.state.partition,
-          datetime: (query.get('timestamp'))? new Date(query.get('timestamp')) : this.state.datetime,
-          offsetsSearch: (query.get('after'))? query.get('after') : this.state.offsetsSearch,
-          search: this._buildSearchFromQueryString(query),
-          offsets: (query.get('offset'))? this._getOffsetsByOffset(query.get('partition'), query.get('offset')) :
-              ((query.get('after'))? this._getOffsetsByAfterString(query.get('after')): this.state.offsets),
-          dateTimeFormat: (uiOptions && uiOptions.topicData && uiOptions.topicData.dateTimeFormat)?
-              uiOptions.topicData.dateTimeFormat : prevState.dateTimeFormat
-        }),
-        () => {
-            if(query.get('single') !== null) {
-              this._getSingleMessage(query.get('partition'), query.get('offset'));
-              this.setState({ canDownload: true })
-            } else {
-              this._getMessages();
-            }
+    this.setState(
+      prevState => ({
+        selectedCluster: clusterId,
+        selectedTopic: topicId,
+        sortBy: query.get('sort')
+          ? query.get('sort')
+          : uiOptions && uiOptions.topicData && uiOptions.topicData.sort
+          ? uiOptions.topicData.sort
+          : this.state.sortBy,
+        partition: query.get('partition') ? query.get('partition') : this.state.partition,
+        datetime: query.get('timestamp') ? new Date(query.get('timestamp')) : this.state.datetime,
+        offsetsSearch: query.get('after') ? query.get('after') : this.state.offsetsSearch,
+        search: this._buildSearchFromQueryString(query),
+        offsets: query.get('offset')
+          ? this._getOffsetsByOffset(query.get('partition'), query.get('offset'))
+          : query.get('after')
+          ? this._getOffsetsByAfterString(query.get('after'))
+          : this.state.offsets,
+        dateTimeFormat:
+          uiOptions && uiOptions.topicData && uiOptions.topicData.dateTimeFormat
+            ? uiOptions.topicData.dateTimeFormat
+            : prevState.dateTimeFormat
+      }),
+      () => {
+        if (query.get('single') !== null) {
+          this._getSingleMessage(query.get('partition'), query.get('offset'));
+          this.setState({ canDownload: true });
+        } else {
+          this._getMessages();
         }
+      }
     );
   }
 
@@ -131,7 +141,7 @@ class TopicData extends Root {
 
     Object.keys(search).forEach(value => {
       const searchFilter = query.get(`searchBy${capitalizeTxt(value)}`);
-      if(searchFilter) {
+      if (searchFilter) {
         const pos = searchFilter.lastIndexOf('_');
         search[value].text = searchFilter.substr(0, pos);
         search[value].type = searchFilter.substr(pos + 1);
@@ -140,46 +150,64 @@ class TopicData extends Root {
     return search;
   }
 
-  _startEventSource = (changePage) => {
+  _startEventSource = changePage => {
     let { selectedCluster, selectedTopic, nextPage } = this.state;
 
     let lastPercentVal = 0.0;
     const percentUpdateDelta = 0.5;
 
     let self = this;
-    this.setState({ messages: [], pageNumber: 1, percent: 0, isSearching: true, recordCount: 0 }, () => {
-      const filters = this._buildFilters();
-      if (changePage) {
-        this._setUrlHistory(filters + '&after=' + nextPage );
-      } else {
-        this._setUrlHistory(filters);
-      }
-      this.eventSource = new EventSource(uriTopicDataSearch(selectedCluster, selectedTopic, filters, (changePage)? nextPage: undefined));
-
-      this.eventSource.addEventListener('searchBody', function(e) {
-        const res = JSON.parse(e.data);
-        const records = res.records || [];
-        const nextPage = (res.after) ? res.after : self.state.nextPage;
-
-        const percentDiff = res.percent - lastPercentVal;
-
-        // to avoid UI slowdowns, only update the percentage in fixed increments
-        if(percentDiff >= percentUpdateDelta) {
-          lastPercentVal = res.percent;
-          self.setState({ nextPage, recordCount: self.state.recordCount + records.length , percent: res.percent.toFixed(2) });
+    this.setState(
+      { messages: [], pageNumber: 1, percent: 0, isSearching: true, recordCount: 0 },
+      () => {
+        const filters = this._buildFilters();
+        if (changePage) {
+          this._setUrlHistory(filters + '&after=' + nextPage);
+        } else {
+          this._setUrlHistory(filters);
         }
+        this.eventSource = new EventSource(
+          uriTopicDataSearch(
+            selectedCluster,
+            selectedTopic,
+            filters,
+            changePage ? nextPage : undefined
+          )
+        );
+
+        this.eventSource.addEventListener('searchBody', function (e) {
+          const res = JSON.parse(e.data);
+          const records = res.records || [];
+          const nextPage = res.after ? res.after : self.state.nextPage;
+
+          const percentDiff = res.percent - lastPercentVal;
+
+          // to avoid UI slowdowns, only update the percentage in fixed increments
+          if (percentDiff >= percentUpdateDelta) {
+            lastPercentVal = res.percent;
+            self.setState({
+              nextPage,
+              recordCount: self.state.recordCount + records.length,
+              percent: res.percent.toFixed(2)
+            });
+          }
 
-        if(records.length) {
-          const tableMessages = self._handleMessages(records, true, self.state.sortBy === "Oldest");
-          self.setState({messages: tableMessages});
-        }
-      });
+          if (records.length) {
+            const tableMessages = self._handleMessages(
+              records,
+              true,
+              self.state.sortBy === 'Oldest'
+            );
+            self.setState({ messages: tableMessages });
+          }
+        });
 
-      this.eventSource.addEventListener('searchEnd', function(e) {
-        self.eventSource.close();
-        self.setState({ percent: 100, isSearching: false, loading: false });
-      });
-    });
+        this.eventSource.addEventListener('searchEnd', function () {
+          self.eventSource.close();
+          self.setState({ percent: 100, isSearching: false, loading: false });
+        });
+      }
+    );
   };
 
   _stopEventSource = () => {
@@ -190,15 +218,20 @@ class TopicData extends Root {
   };
 
   _clearSearch = () => {
-    this.setState({ search: {
-        key: { text: '', type: 'C'},
-        value: { text: '', type: 'C'},
-        headerKey: { text: '', type: 'C'},
-        headerValue: { text: '', type: 'C'}
-      } }, () => {
+    this.setState(
+      {
+        search: {
+          key: { text: '', type: 'C' },
+          value: { text: '', type: 'C' },
+          headerKey: { text: '', type: 'C' },
+          headerValue: { text: '', type: 'C' }
+        }
+      },
+      () => {
         this._searchMessages();
-    });
-  }
+      }
+    );
+  };
 
   _hasAnyFilterFilled() {
     const { search } = this.state;
@@ -206,13 +239,7 @@ class TopicData extends Root {
   }
 
   _buildFilters() {
-    const {
-      sortBy,
-      partition,
-      datetime,
-      offsetsSearch,
-      search
-    } = this.state;
+    const { sortBy, partition, datetime, offsetsSearch, search } = this.state;
 
     const filters = [];
 
@@ -222,30 +249,36 @@ class TopicData extends Root {
 
     if (datetime) {
       let timestamp = datetime.toString().length > 0 ? moment(datetime) : '';
-      timestamp = formatDateTime(
-            {
-              year: timestamp.year(),
-              monthValue: timestamp.month(),
-              dayOfMonth: timestamp.date(),
-              hour: timestamp.hour(),
-              minute: timestamp.minute(),
-              second: timestamp.second(),
-              milli: timestamp.millisecond()
-            },
-            'YYYY-MM-DDTHH:mm:ss.SSS',
-            true
-          ) + 'Z';
+      timestamp =
+        formatDateTime(
+          {
+            year: timestamp.year(),
+            monthValue: timestamp.month(),
+            dayOfMonth: timestamp.date(),
+            hour: timestamp.hour(),
+            minute: timestamp.minute(),
+            second: timestamp.second(),
+            milli: timestamp.millisecond()
+          },
+          'YYYY-MM-DDTHH:mm:ss.SSS',
+          true
+        ) + 'Z';
       filters.push(`timestamp=${timestamp}`);
     }
 
-    Object.keys(search).filter(value => search[value].text.length > 0)
-               .forEach(value => {
-                    filters.push(`searchBy${capitalizeTxt(value)}=${encodeURIComponent(search[value].text)}_${search[value].type}`)
-                })
+    Object.keys(search)
+      .filter(value => search[value].text.length > 0)
+      .forEach(value => {
+        filters.push(
+          `searchBy${capitalizeTxt(value)}=${encodeURIComponent(search[value].text)}_${
+            search[value].type
+          }`
+        );
+      });
     return filters.join('&');
   }
 
-  _searchMessages(changePage = false){
+  _searchMessages(changePage = false) {
     this._stopEventSource();
     if (this._hasAnyFilterFilled()) {
       this._startEventSource(changePage);
@@ -255,27 +288,24 @@ class TopicData extends Root {
   }
 
   _getSingleMessage(partition, offset) {
-    const {
-      selectedCluster,
-      selectedTopic,
-    } = this.state;
+    const { selectedCluster, selectedTopic } = this.state;
 
-    const requests = [this.getApi(uriTopicDataSingleRecord(selectedCluster, selectedTopic, partition, offset)),
-                      this.getApi(uriTopicsPartitions(selectedCluster, selectedTopic))];
+    const requests = [
+      this.getApi(uriTopicDataSingleRecord(selectedCluster, selectedTopic, partition, offset)),
+      this.getApi(uriTopicsPartitions(selectedCluster, selectedTopic))
+    ];
 
     this._fetchMessages(requests);
   }
 
   _getMessages(changePage = false) {
-    const {
-      selectedCluster,
-      selectedTopic,
-      nextPage
-    } = this.state;
+    const { selectedCluster, selectedTopic, nextPage } = this.state;
 
     const filters = this._buildFilters();
     const requests = [
-      this.getApi(uriTopicData(selectedCluster, selectedTopic, filters, changePage ? nextPage : undefined)),
+      this.getApi(
+        uriTopicData(selectedCluster, selectedTopic, filters, changePage ? nextPage : undefined)
+      ),
       this.getApi(uriTopicsPartitions(selectedCluster, selectedTopic))
     ];
 
@@ -289,85 +319,79 @@ class TopicData extends Root {
   }
 
   _fetchMessages(requests, changePage = false) {
-    const {
-      nextPage,
-      pageNumber,
-      partitionCount,
-      recordCount,
-      offsets
-    } = this.state;
+    const { nextPage, pageNumber, partitionCount, recordCount, offsets } = this.state;
 
-    Promise.all(requests)
-      .then(data => {
-        let tableMessages = [],
-            pageNumberTemp, offsetsTemp, partitionCountTemp, nextPageTemp, recordCountTemp;
+    Promise.all(requests).then(data => {
+      let tableMessages = [],
+        pageNumberTemp,
+        offsetsTemp,
+        partitionCountTemp,
+        nextPageTemp,
+        recordCountTemp;
 
-        const messagesData = data[0].data;
-        const partitionData = data[1].data;
+      const messagesData = data[0].data;
+      const partitionData = data[1].data;
 
-        if (messagesData.results) {
-          tableMessages = this._handleMessages(messagesData.results);
-        } else {
-          pageNumberTemp = 1;
-        }
-        if (partitionData) {
-          if (changePage) {
-            offsetsTemp = this._getNextPageOffsets(nextPage);
-          }
-          partitionCountTemp = partitionData.length;
-          nextPageTemp = messagesData.after;
-          recordCountTemp = messagesData.size;
+      if (messagesData.results) {
+        tableMessages = this._handleMessages(messagesData.results);
+      } else {
+        pageNumberTemp = 1;
+      }
+      if (partitionData) {
+        if (changePage) {
+          offsetsTemp = this._getNextPageOffsets(nextPage);
         }
-        this.setState({
-          messages: tableMessages,
-          canDeleteRecords: messagesData.canDeleteRecords,
-          pageNumber: (pageNumberTemp) ? pageNumberTemp : pageNumber,
-          partitionCount: (partitionCountTemp) ? partitionCountTemp : partitionCount,
-          nextPage: (nextPageTemp) ? nextPageTemp : nextPage,
-          recordCount: (recordCountTemp) ? recordCountTemp : recordCount,
-          offsets: (offsetsTemp) ? offsetsTemp : offsets,
-          loading: false
-        });
+        partitionCountTemp = partitionData.length;
+        nextPageTemp = messagesData.after;
+        recordCountTemp = messagesData.size;
+      }
+      this.setState({
+        messages: tableMessages,
+        canDeleteRecords: messagesData.canDeleteRecords,
+        pageNumber: pageNumberTemp ? pageNumberTemp : pageNumber,
+        partitionCount: partitionCountTemp ? partitionCountTemp : partitionCount,
+        nextPage: nextPageTemp ? nextPageTemp : nextPage,
+        recordCount: recordCountTemp ? recordCountTemp : recordCount,
+        offsets: offsetsTemp ? offsetsTemp : offsets,
+        loading: false
+      });
     });
   }
 
   _handleOnDelete(message) {
     this.setState({ compactMessageToDelete: message }, () => {
       this._showDeleteModal(
-          <React.Fragment>
-            Do you want to delete message: {<code>{message.key}</code>} ?
-          </React.Fragment>
+        <React.Fragment>
+          Do you want to delete message: {<code>{message.key}</code>} ?
+        </React.Fragment>
       );
     });
   }
 
   _copyToClipboard(code) {
-    const textField = document.createElement('textarea')
-    textField.innerText = code
-    document.body.appendChild(textField)
-    textField.select()
-    document.execCommand('copy')
-    textField.remove()
+    const textField = document.createElement('textarea');
+    textField.innerText = code;
+    document.body.appendChild(textField);
+    textField.select();
+    document.execCommand('copy');
+    textField.remove();
   }
 
   _handleOnShare(row) {
-    const {
-      selectedCluster,
-      selectedTopic
-    } = this.state;
+    const { selectedCluster, selectedTopic } = this.state;
 
-    const pathToShare = `${basePath}/ui/${selectedCluster}/topic/${selectedTopic}/data?single=true&partition=${row.partition}&offset=${row.offset}`;
+    const pathToShare = `${basePath}/ui/${selectedCluster}/topic/${selectedTopic}/data?single=true&partition=${row.partition}&offset=${row.offset}`; // eslint-disable-line max-len
 
     try {
-      this._copyToClipboard(`${window.location.host}${pathToShare}`)
+      this._copyToClipboard(`${window.location.host}${pathToShare}`);
       toast.info('Message url is copied to your clipboard!');
     } catch (err) {
       console.error('Failed to copy: ', err);
     }
 
-    this.setState({ canDownload: true })
+    this.setState({ canDownload: true });
 
-    this.props.history.push(pathToShare)
+    this.props.history.push(pathToShare);
     this._getSingleMessage(row.partition, row.offset);
   }
 
@@ -375,7 +399,7 @@ class TopicData extends Root {
     const hasKey = key && key !== null && key !== 'null';
 
     const a = document.createElement('a');
-    a.href = URL.createObjectURL( new Blob([data], { type:'text/json' }) );
+    a.href = URL.createObjectURL(new Blob([data], { type: 'text/json' }));
     a.download = `${hasKey ? key : 'file'}.json`;
 
     a.click();
@@ -384,33 +408,33 @@ class TopicData extends Root {
 
   async _handleOnDateTimeFormatChanged(newDateTimeFormat) {
     const { clusterId } = this.props.match.params;
-    this.setState(({
+    this.setState({
       dateTimeFormat: newDateTimeFormat
-    }));
+    });
     const currentUiOptions = await getClusterUIOptions(clusterId);
     const newUiOptions = {
       ...currentUiOptions,
       topicData: {
-        ...(currentUiOptions.topicData),
+        ...currentUiOptions.topicData,
         dateTimeFormat: newDateTimeFormat
       }
-    }
+    };
     setUIOptions(clusterId, newUiOptions);
   }
 
   _handleCopy(row) {
-    const data =  {
+    const data = {
       partition: row.partition,
       key: row.key,
       header: row.headers,
       keySchemaId: row.schema.key,
       valueSchemaId: row.schema.value,
-      value: row.value,
-    }
-    setProduceToTopicValues(data)
+      value: row.value
+    };
+    setProduceToTopicValues(data);
 
     const { clusterId, topicId } = this.props.match.params;
-    this.props.history.push(`/ui/${clusterId}/topic/${topicId}/produce`)
+    this.props.history.push(`/ui/${clusterId}/topic/${topicId}/produce`);
   }
 
   _showDeleteModal = deleteMessage => {
@@ -427,18 +451,20 @@ class TopicData extends Root {
     const encodedkey = new Buffer(message.key).toString('base64');
     const deleteData = { partition: parseInt(message.partition), key: encodedkey };
     this.removeApi(
-        uriTopicDataDelete(selectedCluster, selectedTopic, parseInt(message.partition), encodedkey),
-        deleteData
+      uriTopicDataDelete(selectedCluster, selectedTopic, parseInt(message.partition), encodedkey),
+      deleteData
     )
-        .then(() => {
-          toast.success(`Record '${message.partition}-${message.offset}' will be deleted on compaction`);
-          this.setState({ showDeleteModal: false, compactMessageToDelete: '' }, () => {
-            this._getMessages();
-          });
-        })
-        .catch(() => {
-          this.setState({ showDeleteModal: false, messageToDelete: {} });
+      .then(() => {
+        toast.success(
+          `Record '${message.partition}-${message.offset}' will be deleted on compaction`
+        );
+        this.setState({ showDeleteModal: false, compactMessageToDelete: '' }, () => {
+          this._getMessages();
         });
+      })
+      .catch(() => {
+        this.setState({ showDeleteModal: false, messageToDelete: {} });
+      });
   };
 
   _handleMessages = (messages, append = false, insertAtEnd = true) => {
@@ -447,7 +473,7 @@ class TopicData extends Root {
       let messageToPush = {
         key: message.key || '',
         value: message.truncated
-          ? message.value + '...\nToo large message. Full body in share button.'  || ''
+          ? message.value + '...\nToo large message. Full body in share button.' || ''
           : message.value || '',
         timestamp: message.timestamp,
         partition: JSON.stringify(message.partition) || '',
@@ -466,13 +492,13 @@ class TopicData extends Root {
     return tableMessages;
   };
 
-  _getNextPageOffsets = (nextPage) => {
+  _getNextPageOffsets = nextPage => {
     let aux = nextPage.substring(nextPage.indexOf('after=') + 6);
     let afterString = aux.substring(0, aux.indexOf('&'));
     return this._getOffsetsByAfterString(afterString);
   };
 
-  _getOffsetsByAfterString = (afterString) => {
+  _getOffsetsByAfterString = afterString => {
     let offsets = [];
     const offsetsByPartition = afterString.split('_');
 
@@ -481,13 +507,13 @@ class TopicData extends Root {
       offsets[`partition${offset[0]}`] = offset[1];
     });
     return offsets;
-  }
+  };
 
   _getOffsetsByOffset = (partition, offset) => {
     let offsets = [];
     offsets[`partition${partition}`] = offset;
     return offsets;
-  }
+  };
 
   _createPartitionOptions = () => {
     const { partitionCount } = this.state;
@@ -507,11 +533,8 @@ class TopicData extends Root {
     return offsetsOptions;
   };
 
-  _setUrlHistory(filters){
-    const {
-      selectedCluster,
-      selectedTopic
-    } = this.state;
+  _setUrlHistory(filters) {
+    const { selectedCluster, selectedTopic } = this.state;
 
     this.props.history.push({
       pathname: `/ui/${selectedCluster}/topic/${selectedTopic}/data`,
@@ -522,17 +545,16 @@ class TopicData extends Root {
   _redirectToSchema(id) {
     const { selectedCluster } = this.state;
 
-    this.getApi(uriSchemaId(selectedCluster, id))
-      .then(response => {
-        if (response.data) {
-          this.props.history.push({
-            pathname: `/ui/${selectedCluster}/schema/details/${response.data.subject}`,
-            schemaId: response.data.subject
-          });
-        } else {
-          toast.warn(`Unable to find the registry schema with id  ${id} !`);
-        }
-      })
+    this.getApi(uriSchemaId(selectedCluster, id)).then(response => {
+      if (response.data) {
+        this.props.history.push({
+          pathname: `/ui/${selectedCluster}/schema/details/${response.data.subject}`,
+          schemaId: response.data.subject
+        });
+      } else {
+        toast.warn(`Unable to find the registry schema with id  ${id} !`);
+      }
+    });
   }
 
   _renderSortOptions() {
@@ -541,14 +563,16 @@ class TopicData extends Root {
     let renderedOptions = [];
     for (let option of sortOptions) {
       renderedOptions.push(
-          <Dropdown.Item
-              key={option}
-              onClick={() => this.setState({ sortBy: option }, () => {
-                this._clearSearch();
-              })}
-          >
-            <i className="fa fa-fw fa-sort-numeric-desc pull-left" aria-hidden="true" /> {option}
-          </Dropdown.Item>
+        <Dropdown.Item
+          key={option}
+          onClick={() =>
+            this.setState({ sortBy: option }, () => {
+              this._clearSearch();
+            })
+          }
+        >
+          <i className="fa fa-fw fa-sort-numeric-desc pull-left" aria-hidden="true" /> {option}
+        </Dropdown.Item>
       );
     }
     return renderedOptions;
@@ -560,14 +584,16 @@ class TopicData extends Root {
     let renderedOptions = [];
     for (let option of partitionOptions) {
       renderedOptions.push(
-          <Dropdown.Item
-              key={option}
-              onClick={() => this.setState({ partition: option }, () => {
-                this._searchMessages();
-              })}
-          >
-            <i className="fa fa-fw pull-left" aria-hidden="true" /> {option}
-          </Dropdown.Item>
+        <Dropdown.Item
+          key={option}
+          onClick={() =>
+            this.setState({ partition: option }, () => {
+              this._searchMessages();
+            })
+          }
+        >
+          <i className="fa fa-fw pull-left" aria-hidden="true" /> {option}
+        </Dropdown.Item>
       );
     }
     return renderedOptions;
@@ -589,23 +615,23 @@ class TopicData extends Root {
       }
 
       renderedOptions.push(
-          <tr key={option}>
-            <td className="offset-navbar-partition-label offset-navbar-partition-td">{option} : </td>
-            <td className="offset-navbar-partition-td">
-              <input
-                  className="form-control"
-                  type="number"
-                  min="0"
-                  name={`${i}`}
-                  value={offsets[camelcaseOption]}
-                  onChange={({ currentTarget: input }) => {
-                    let { offsets } = this.state;
-                    offsets[camelcaseOption] = input.value;
-                    this.setState(offsets);
-                  }}
-              />
-            </td>
-          </tr>
+        <tr key={option}>
+          <td className="offset-navbar-partition-label offset-navbar-partition-td">{option} : </td>
+          <td className="offset-navbar-partition-td">
+            <input
+              className="form-control"
+              type="number"
+              min="0"
+              name={`${i}`}
+              value={offsets[camelcaseOption]}
+              onChange={({ currentTarget: input }) => {
+                let { offsets } = this.state;
+                offsets[camelcaseOption] = input.value;
+                this.setState(offsets);
+              }}
+            />
+          </td>
+        </tr>
       );
     }
     return renderedOptions;
@@ -624,30 +650,30 @@ class TopicData extends Root {
     const { search } = this.state;
 
     return (
-        <div className="search-input-fields">
-          <label>{label}</label>
-          <input
-              className="form-control"
-              name={`${name}_text`}
-              type="text"
-              value={search[name].text}
-              onChange={({ currentTarget: input }) => {
-                search[name].text = input.value;
-                this.setState({ search });
-              }}
-          />
-          <Select
-              name={`${name}_select`}
-              selectClass={'col-xs-2'}
-              value={search[name].type}
-              label=""
-              items={this.searchFilterTypes}
-              onChange={value => {
-                search[name].type = value.target.value;
-                this.setState({ search });
-              }}
-          />
-        </div>
+      <div className="search-input-fields">
+        <label>{label}</label>
+        <input
+          className="form-control"
+          name={`${name}_text`}
+          type="text"
+          value={search[name].text}
+          onChange={({ currentTarget: input }) => {
+            search[name].text = input.value;
+            this.setState({ search });
+          }}
+        />
+        <Select
+          name={`${name}_select`}
+          selectClass={'col-xs-2'}
+          value={search[name].type}
+          label=""
+          items={this.searchFilterTypes}
+          onChange={value => {
+            search[name].type = value.target.value;
+            this.setState({ search });
+          }}
+        />
+      </div>
     );
   }
 
@@ -656,48 +682,48 @@ class TopicData extends Root {
 
     return (
       <div style={{ minWidth: '400px' }} className="input-group">
-
         {this._renderSearchFilter('key', 'Key')}
-        {this._renderSearchFilter('value','Value')}
+        {this._renderSearchFilter('value', 'Value')}
         {this._renderSearchFilter('headerKey', 'Header Key')}
         {this._renderSearchFilter('headerValue', 'Header Value')}
 
-        <div style={{display: 'flex' }}>
+        <div style={{ display: 'flex' }}>
           <button
-              className="btn btn-primary inline-block search"
-              type="button"
-              onClick={() => this._searchMessages() }
+            className="btn btn-primary inline-block search"
+            type="button"
+            onClick={() => this._searchMessages()}
           >
             {isSearching ? (
-                <i className="fa fa-spinner fa-spin"></i>
+              <i className="fa fa-spinner fa-spin"></i>
             ) : (
-                <i className="fa fa-search"></i>
+              <i className="fa fa-search"></i>
             )}
           </button>
           <button
-              className="btn btn-primary btn-border inline-block"
-              type="button"
-              disabled={!isSearching}
-              onClick={() => this._stopEventSource()}
+            className="btn btn-primary btn-border inline-block"
+            type="button"
+            disabled={!isSearching}
+            onClick={() => this._stopEventSource()}
           >
             Stop
           </button>
           <button
-              className="btn btn-primary btn-border inline-block"
-              type="button"
-              disabled={isSearching}
-              onClick={() => this._clearSearch()}
+            className="btn btn-primary btn-border inline-block"
+            type="button"
+            disabled={isSearching}
+            onClick={() => this._clearSearch()}
           >
             Clear
           </button>
         </div>
-    </div>);
+      </div>
+    );
   }
 
   _renderCurrentSearchText() {
     const { search } = this.state;
     const filterKey = Object.keys(search).find(value => search[value].text.length > 0);
-    return (filterKey !== undefined)? search[filterKey].text : '';
+    return filterKey !== undefined ? search[filterKey].text : '';
   }
 
   render() {
@@ -717,9 +743,9 @@ class TopicData extends Root {
       loading
     } = this.state;
 
-    let actions = [constants.TABLE_SHARE, constants.TABLE_COPY]
-    if (canDeleteRecords) actions.push(constants.TABLE_DELETE)
-    if (canDownload) actions.push(constants.TABLE_DOWNLOAD)
+    let actions = [constants.TABLE_SHARE, constants.TABLE_COPY];
+    if (canDeleteRecords) actions.push(constants.TABLE_DELETE);
+    if (canDownload) actions.push(constants.TABLE_DOWNLOAD);
 
     let date = moment(datetime);
     const { history } = this.props;
@@ -733,80 +759,82 @@ class TopicData extends Root {
       { colName: 'Schema', colSpan: 1 }
     ];
     return (
-        <React.Fragment>
-          <nav
-              className="navbar navbar-expand-lg navbar-light bg-light
+      <React.Fragment>
+        <nav
+          className="navbar navbar-expand-lg navbar-light bg-light
          mr-auto khq-data-filter khq-sticky khq-nav"
+        >
+          <button
+            className="navbar-toggler"
+            type="button"
+            data-toggle="collapse"
+            data-target="#topic-data"
+            aria-controls="topic-data"
+            aria-expanded="false"
+            aria-label="Toggle navigation"
+            onClick={() => {
+              this._openAndCloseFilters();
+            }}
           >
-            <button
-                className="navbar-toggler"
-                type="button"
-                data-toggle="collapse"
-                data-target="#topic-data"
-                aria-controls="topic-data"
-                aria-expanded="false"
-                aria-label="Toggle navigation"
-                onClick={() => {
-                  this._openAndCloseFilters();
+            <span className="navbar-toggler-icon" />
+          </button>
+
+          <nav className="pagination-data">
+            <div>
+              <Pagination
+                pageNumber={pageNumber}
+                totalRecords={recordCount}
+                totalPageNumber={messages.length === 0 ? pageNumber : undefined}
+                onChange={({ currentTarget: input }) => {
+                  this.setState({ pageNumber: input.value });
                 }}
-            >
-              <span className="navbar-toggler-icon" />
-            </button>
-
-            <nav className="pagination-data">
-              <div>
-                <Pagination
-                    pageNumber={pageNumber}
-                    totalRecords={recordCount}
-                    totalPageNumber={messages.length === 0 ? pageNumber : undefined}
-                    onChange={({ currentTarget: input }) => {
-                      this.setState({ pageNumber: input.value });
-                    }}
-                    onSubmit={() => {
-                      this.setState(
-                          {
-                            pageNumber: pageNumber + 1
-                          },
-                          () => {
-                            this._searchMessages(true);
-                          }
-                      );
-                    }}
-                    editPageNumber={false}
-                    showTotalPageNumber={false}
-                />
-              </div>
-            </nav>
-
-            <div className={`collapse navbar-collapse ${showFilters}`} id="topic-data">
-              <ul className="navbar-nav mr-auto">
-                <li className="nav-item dropdown">
-                  <Dropdown>
-                    <Dropdown.Toggle className="nav-link dropdown-toggle">
-                      <strong>Sort:</strong> ({sortBy})
-                    </Dropdown.Toggle>
-                    {!loading && <Dropdown.Menu>{this._renderSortOptions()}</Dropdown.Menu>}
-                  </Dropdown>
-                </li>
-                <li className="nav-item dropdown">
-                  <Dropdown>
-                    <Dropdown.Toggle className="nav-link dropdown-toggle">
-                      <strong>Partition:</strong> ({partition})
-                    </Dropdown.Toggle>
-                    {!loading && <Dropdown.Menu>
+                onSubmit={() => {
+                  this.setState(
+                    {
+                      pageNumber: pageNumber + 1
+                    },
+                    () => {
+                      this._searchMessages(true);
+                    }
+                  );
+                }}
+                editPageNumber={false}
+                showTotalPageNumber={false}
+              />
+            </div>
+          </nav>
+
+          <div className={`collapse navbar-collapse ${showFilters}`} id="topic-data">
+            <ul className="navbar-nav mr-auto">
+              <li className="nav-item dropdown">
+                <Dropdown>
+                  <Dropdown.Toggle className="nav-link dropdown-toggle">
+                    <strong>Sort:</strong> ({sortBy})
+                  </Dropdown.Toggle>
+                  {!loading && <Dropdown.Menu>{this._renderSortOptions()}</Dropdown.Menu>}
+                </Dropdown>
+              </li>
+              <li className="nav-item dropdown">
+                <Dropdown>
+                  <Dropdown.Toggle className="nav-link dropdown-toggle">
+                    <strong>Partition:</strong> ({partition})
+                  </Dropdown.Toggle>
+                  {!loading && (
+                    <Dropdown.Menu>
                       <div style={{ minWidth: '300px' }} className="khq-offset-navbar">
-                      {this._renderPartitionOptions()}
+                        {this._renderPartitionOptions()}
                       </div>
-                    </Dropdown.Menu>}
-                  </Dropdown>
-                </li>
-                <li className="nav-item dropdown">
-                  <Dropdown>
-                    <Dropdown.Toggle className="nav-link dropdown-toggle">
-                      <strong>Timestamp:</strong>
-                      {(datetime !== '' &&
+                    </Dropdown.Menu>
+                  )}
+                </Dropdown>
+              </li>
+              <li className="nav-item dropdown">
+                <Dropdown>
+                  <Dropdown.Toggle className="nav-link dropdown-toggle">
+                    <strong>Timestamp:</strong>
+                    {datetime !== '' &&
                       ' ' +
-                      formatDateTime(
+                        formatDateTime(
                           {
                             year: date.year(),
                             monthValue: date.month(),
@@ -816,314 +844,317 @@ class TopicData extends Root {
                             second: date.second()
                           },
                           'DD-MM-YYYY HH:mm'
-                      ))}
-                    </Dropdown.Toggle>
-                    {!loading && (
-                        <Dropdown.Menu>
-                          <div className="input-group">
-                            <DatePicker
-                                onClear={() => {
-                                  this.setState({ datetime: '' });
-                                }}
-                                showDateTimeInput
-                                showTimeSelect
-                                value={datetime}
-                                onChange={value => {
-                                  this.setState({ datetime: value }, () => {
-                                    this._searchMessages();
-                                  });
-                                }}
-                            />
-                          </div>
-                        </Dropdown.Menu>
-                    )}
-                  </Dropdown>
-                </li>
-                <li className="nav-item dropdown">
-                  <Dropdown>
-                    <Dropdown.Toggle className="nav-link dropdown-toggle">
-                      <strong>Search:</strong> { this._renderCurrentSearchText() }
-                    </Dropdown.Toggle>
-                    {!loading && (
-                        <Dropdown.Menu>
-                          {this._renderSearchGroup()}
-                        </Dropdown.Menu>
-                    )}
-                  </Dropdown>
-                </li>
-                <li className="nav-item dropdown">
-                  <Dropdown>
-                    <Dropdown.Toggle className="nav-link dropdown-toggle">
-                      <strong>Offsets:</strong>
-                    </Dropdown.Toggle>
-                    {!loading && (
-                        <Dropdown.Menu>
-                          <div style={{ minWidth: '300px' }} className="khq-offset-navbar">
-                            <div className="input-group">
-                              <table>{this._renderOffsetsOptions()}</table>
-                              <div className="input-group-append">
-                                <button
-                                    className="btn btn-primary offsets-ok"
-                                    type="button"
-                                    onClick={() => {
-                                      let offsetsSearch = '';
-                                      for (let i = 0; i < Object.keys(offsets).length; i++) {
-                                        if (Object.values(offsets)[i] !== '') {
-                                          if (offsetsSearch !== '') {
-                                            offsetsSearch += '_';
-                                          }
-                                          offsetsSearch += `${i}-${Object.values(offsets)[i]}`;
-                                        }
-                                      }
-                                      this.setState({ offsetsSearch }, () => {
-                                        this._searchMessages();
-                                      });
-                                    }}
-                                >
-                                  OK
-                                </button>
-                              </div>
-                            </div>
-                          </div>
-                        </Dropdown.Menu>
-                    )}
-                  </Dropdown>
-                </li>
-                <li>
-                  <Dropdown>
-                    <Dropdown.Toggle className="nav-link dropdown-toggle">
-                      <strong>Time Format:</strong> ({this.state.dateTimeFormat})
-                    </Dropdown.Toggle>
+                        )}
+                  </Dropdown.Toggle>
+                  {!loading && (
                     <Dropdown.Menu>
-                      <Dropdown.Item onClick={() =>
-                          this._handleOnDateTimeFormatChanged(
-                            constants.SETTINGS_VALUES.TOPIC_DATA.DATE_TIME_FORMAT.RELATIVE
-                          )
-                        }>
-                        Show relative time
-                      </Dropdown.Item>
-                      <Dropdown.Item onClick={() =>
-                          this._handleOnDateTimeFormatChanged(
-                            constants.SETTINGS_VALUES.TOPIC_DATA.DATE_TIME_FORMAT.ISO
-                          )
-                        }>
-                        Show ISO timestamp
-                      </Dropdown.Item>
+                      <div className="input-group">
+                        <DatePicker
+                          onClear={() => {
+                            this.setState({ datetime: '' });
+                          }}
+                          showDateTimeInput
+                          showTimeSelect
+                          value={datetime}
+                          onChange={value => {
+                            this.setState({ datetime: value }, () => {
+                              this._searchMessages();
+                            });
+                          }}
+                        />
+                      </div>
                     </Dropdown.Menu>
-                  </Dropdown>
-                </li>
-              </ul>
-            </div>
-          </nav>
-          {isSearching && <ProgressBar style={{ height: '0.3rem' }} animated now={percent} />}
-          <div className="table-responsive">
-            <Table
-                loading={loading}
-                history={history}
-                reduce={true}
-                firstHeader={firstColumns}
-                columns={[
-                  {
-                    id: 'key',
-                    accessor: 'key',
-                    colName: 'Key',
-                    type: 'text',
-                    cell: (obj, col) => {
-                      let value = obj[col.accessor] === '' ? 'null' : obj[col.accessor];
-                      return (
-                          <span>
+                  )}
+                </Dropdown>
+              </li>
+              <li className="nav-item dropdown">
+                <Dropdown>
+                  <Dropdown.Toggle className="nav-link dropdown-toggle">
+                    <strong>Search:</strong> {this._renderCurrentSearchText()}
+                  </Dropdown.Toggle>
+                  {!loading && <Dropdown.Menu>{this._renderSearchGroup()}</Dropdown.Menu>}
+                </Dropdown>
+              </li>
+              <li className="nav-item dropdown">
+                <Dropdown>
+                  <Dropdown.Toggle className="nav-link dropdown-toggle">
+                    <strong>Offsets:</strong>
+                  </Dropdown.Toggle>
+                  {!loading && (
+                    <Dropdown.Menu>
+                      <div style={{ minWidth: '300px' }} className="khq-offset-navbar">
+                        <div className="input-group">
+                          <table>{this._renderOffsetsOptions()}</table>
+                          <div className="input-group-append">
+                            <button
+                              className="btn btn-primary offsets-ok"
+                              type="button"
+                              onClick={() => {
+                                let offsetsSearch = '';
+                                for (let i = 0; i < Object.keys(offsets).length; i++) {
+                                  if (Object.values(offsets)[i] !== '') {
+                                    if (offsetsSearch !== '') {
+                                      offsetsSearch += '_';
+                                    }
+                                    offsetsSearch += `${i}-${Object.values(offsets)[i]}`;
+                                  }
+                                }
+                                this.setState({ offsetsSearch }, () => {
+                                  this._searchMessages();
+                                });
+                              }}
+                            >
+                              OK
+                            </button>
+                          </div>
+                        </div>
+                      </div>
+                    </Dropdown.Menu>
+                  )}
+                </Dropdown>
+              </li>
+              <li>
+                <Dropdown>
+                  <Dropdown.Toggle className="nav-link dropdown-toggle">
+                    <strong>Time Format:</strong> ({this.state.dateTimeFormat})
+                  </Dropdown.Toggle>
+                  <Dropdown.Menu>
+                    <Dropdown.Item
+                      onClick={() =>
+                        this._handleOnDateTimeFormatChanged(
+                          constants.SETTINGS_VALUES.TOPIC_DATA.DATE_TIME_FORMAT.RELATIVE
+                        )
+                      }
+                    >
+                      Show relative time
+                    </Dropdown.Item>
+                    <Dropdown.Item
+                      onClick={() =>
+                        this._handleOnDateTimeFormatChanged(
+                          constants.SETTINGS_VALUES.TOPIC_DATA.DATE_TIME_FORMAT.ISO
+                        )
+                      }
+                    >
+                      Show ISO timestamp
+                    </Dropdown.Item>
+                  </Dropdown.Menu>
+                </Dropdown>
+              </li>
+            </ul>
+          </div>
+        </nav>
+        {isSearching && <ProgressBar style={{ height: '0.3rem' }} animated now={percent} />}
+        <div className="table-responsive">
+          <Table
+            loading={loading}
+            history={history}
+            reduce={true}
+            firstHeader={firstColumns}
+            columns={[
+              {
+                id: 'key',
+                accessor: 'key',
+                colName: 'Key',
+                type: 'text',
+                cell: (obj, col) => {
+                  let value = obj[col.accessor] === '' ? 'null' : obj[col.accessor];
+                  return (
+                    <span>
                       <code className="key">{value}</code>
                     </span>
-                      );
-                    }
-                  },
-                  {
-                    id: 'value',
-                    accessor: 'value',
-                    colName: 'Value',
-                    type: 'text',
-                    extraRow: true,
-                    extraRowContent: (obj, index) => {
-                      let value = obj.value;
-                      try {
-                        let json = LosslessJson.parse(obj.value);
-                        value = LosslessJson.stringify(json, undefined, "  ");
-                        // eslint-disable-next-line no-empty
-                      } catch (e) {}
-
-                      return (
-                          <AceEditor
-                              mode="json"
-                              id={'value' + index}
-                              theme="merbivore_soft"
-                              value={value || 'null'}
-                              readOnly
-                              name="UNIQUE_ID_OF_DIV"
-                              editorProps={{ $blockScrolling: true }}
-                              style={{ width: '100%', minHeight: '25vh' }}
-                          />
-                      );
-                    },
-                    cell: obj => {
-                      return (
-                          <div>
-                            {obj.exceptions.length > 0 && (
-                                <div
-                                    className="alert alert-warning"
-                                    role="alert"
-                                    dangerouslySetInnerHTML={{ __html: obj.exceptions.join('<br /><br />')}}>
-                                </div>
-                            )}
-                            <pre className="mb-0 khq-data-highlight">
-                              <code>{obj.value || 'null'}</code>
-                            </pre>
-                          </div>
-                      );
-                    }
-                  },
-                  {
-                    id: 'timestamp',
-                    accessor: 'timestamp',
-                    colName: 'Date',
-                    type: 'text',
-                    cell: (obj, col) => {
-                      return <DateTime
-                        isoDateTimeString={obj[col.accessor]}
-                        dateTimeFormat={this.state.dateTimeFormat}
-                      />;
-                    }
-                  },
-                  {
-                    id: 'partition',
-                    accessor: 'partition',
-                    colName: 'Partition',
-                    type: 'text',
-                    cell: (obj, col) => {
-                      return obj[col.accessor];
-                    }
-                  },
-                  {
-                    id: 'offset',
-                    accessor: 'offset',
-                    colName: 'Offset',
-                    type: 'text',
-                    cell: (obj, col) => {
-                      return obj[col.accessor];
-                    }
-                  },
-                  {
-                    id: 'headers',
-                    accessor: 'headers',
-                    colName: 'Headers',
-                    type: 'text',
-                    expand: true,
-                    cell: obj => {
-                      return <div className="tail-headers">{obj.headers.length}</div>;
-                    }
-                  },
-                  {
-                    id: 'schema',
-                    accessor: 'schema',
-                    colName: 'Schema',
-                    type: 'text',
-                    cell: (obj, col) => {
-                      return (
-                          <div className="justify-items">
-                            {obj[col.accessor].key !== undefined && (
-                                <span
-                                    className="badge badge-primary clickable"
-                                    onClick={() => {
-                                      this._redirectToSchema(obj.schema.key);
-                                    }}
-                                >
+                  );
+                }
+              },
+              {
+                id: 'value',
+                accessor: 'value',
+                colName: 'Value',
+                type: 'text',
+                extraRow: true,
+                extraRowContent: (obj, index) => {
+                  let value = obj.value;
+                  try {
+                    let json = LosslessJson.parse(obj.value);
+                    value = LosslessJson.stringify(json, undefined, '  ');
+                    // eslint-disable-next-line no-empty
+                  } catch (e) {}
+
+                  return (
+                    <AceEditor
+                      mode="json"
+                      id={'value' + index}
+                      theme="merbivore_soft"
+                      value={value || 'null'}
+                      readOnly
+                      name="UNIQUE_ID_OF_DIV"
+                      editorProps={{ $blockScrolling: true }}
+                      style={{ width: '100%', minHeight: '25vh' }}
+                    />
+                  );
+                },
+                cell: obj => {
+                  return (
+                    <div>
+                      {obj.exceptions.length > 0 && (
+                        <div
+                          className="alert alert-warning"
+                          role="alert"
+                          dangerouslySetInnerHTML={{ __html: obj.exceptions.join('<br /><br />') }}
+                        ></div>
+                      )}
+                      <pre className="mb-0 khq-data-highlight">
+                        <code>{obj.value || 'null'}</code>
+                      </pre>
+                    </div>
+                  );
+                }
+              },
+              {
+                id: 'timestamp',
+                accessor: 'timestamp',
+                colName: 'Date',
+                type: 'text',
+                cell: (obj, col) => {
+                  return (
+                    <DateTime
+                      isoDateTimeString={obj[col.accessor]}
+                      dateTimeFormat={this.state.dateTimeFormat}
+                    />
+                  );
+                }
+              },
+              {
+                id: 'partition',
+                accessor: 'partition',
+                colName: 'Partition',
+                type: 'text',
+                cell: (obj, col) => {
+                  return obj[col.accessor];
+                }
+              },
+              {
+                id: 'offset',
+                accessor: 'offset',
+                colName: 'Offset',
+                type: 'text',
+                cell: (obj, col) => {
+                  return obj[col.accessor];
+                }
+              },
+              {
+                id: 'headers',
+                accessor: 'headers',
+                colName: 'Headers',
+                type: 'text',
+                expand: true,
+                cell: obj => {
+                  return <div className="tail-headers">{obj.headers.length}</div>;
+                }
+              },
+              {
+                id: 'schema',
+                accessor: 'schema',
+                colName: 'Schema',
+                type: 'text',
+                cell: (obj, col) => {
+                  return (
+                    <div className="justify-items">
+                      {obj[col.accessor].key !== undefined && (
+                        <span
+                          className="badge badge-primary clickable"
+                          onClick={() => {
+                            this._redirectToSchema(obj.schema.key);
+                          }}
+                        >
                           Key: {obj[col.accessor].key}
                         </span>
-                            )}
-
-                            {obj[col.accessor].value !== undefined && (
-                                <span
-                                    className="badge badge-primary clickable schema-value"
-                                    onClick={() => {
-                                      this._redirectToSchema(obj.schema.value);
-                                    }}
-                                >
+                      )}
+
+                      {obj[col.accessor].value !== undefined && (
+                        <span
+                          className="badge badge-primary clickable schema-value"
+                          onClick={() => {
+                            this._redirectToSchema(obj.schema.value);
+                          }}
+                        >
                           Value: {obj[col.accessor].value}
                         </span>
-                            )}
-                          </div>
-                      );
-                    }
-                  }
-                ]}
-                extraRow
-                noStripes
-                data={messages}
-                rowId={data => {
-                  return data.partition + '-' + data.offset;
-                }}
-                updateData={data => {
-                  this.setState({ messages: data });
-                }}
-                onDelete={row => {
-                  this._handleOnDelete(row);
-                }}
-                onShare={row => {
-                  this._handleOnShare(row);
-                }}
-                onDownload={row => {
-                  this._handleDownload(row);
-                }}
-                onCopy={row => {
-                  this._handleCopy(row)
-                }}
-                actions={actions}
-                onExpand={obj => {
-                  return obj.headers.map(header => {
-                    return (
-                        <tr
-                            className={'table-sm'}
-                            style={{
-                              display: 'flex',
-                              flexDirection: 'row',
-                              width: '100%'
-                            }}
-                        >
-                          <td
-                              style={{
-                                width: '100%',
-                                display: 'flex',
-                                borderStyle: 'dashed',
-                                borderWidth: '1px',
-                                backgroundColor: '#171819'
-                              }}
-                          >
-                            {header.key}
-                          </td>
-                          <td
-                              style={{
-                                width: '100%',
-                                display: 'flex',
-                                borderStyle: 'dashed',
-                                borderWidth: '1px',
-                                backgroundColor: '#171819'
-                              }}
-                          >
-                            {header.value}
-                          </td>
-                        </tr>
-                    );
-                  });
-                }}
-            />
-          </div>
-
-          <ConfirmModal
-              show={this.state.showDeleteModal}
-              handleCancel={this._closeDeleteModal}
-              handleConfirm={this._deleteCompactMessage}
-              message={this.state.deleteMessage}
+                      )}
+                    </div>
+                  );
+                }
+              }
+            ]}
+            extraRow
+            noStripes
+            data={messages}
+            rowId={data => {
+              return data.partition + '-' + data.offset;
+            }}
+            updateData={data => {
+              this.setState({ messages: data });
+            }}
+            onDelete={row => {
+              this._handleOnDelete(row);
+            }}
+            onShare={row => {
+              this._handleOnShare(row);
+            }}
+            onDownload={row => {
+              this._handleDownload(row);
+            }}
+            onCopy={row => {
+              this._handleCopy(row);
+            }}
+            actions={actions}
+            onExpand={obj => {
+              return obj.headers.map((header, i) => {
+                return (
+                  <tr
+                    key={i}
+                    className={'table-sm'}
+                    style={{
+                      display: 'flex',
+                      flexDirection: 'row',
+                      width: '100%'
+                    }}
+                  >
+                    <td
+                      style={{
+                        width: '100%',
+                        display: 'flex',
+                        borderStyle: 'dashed',
+                        borderWidth: '1px',
+                        backgroundColor: '#171819'
+                      }}
+                    >
+                      {header.key}
+                    </td>
+                    <td
+                      style={{
+                        width: '100%',
+                        display: 'flex',
+                        borderStyle: 'dashed',
+                        borderWidth: '1px',
+                        backgroundColor: '#171819'
+                      }}
+                    >
+                      {header.value}
+                    </td>
+                  </tr>
+                );
+              });
+            }}
           />
-        </React.Fragment>
+        </div>
+
+        <ConfirmModal
+          show={this.state.showDeleteModal}
+          handleCancel={this._closeDeleteModal}
+          handleConfirm={this._deleteCompactMessage}
+          message={this.state.deleteMessage}
+        />
+      </React.Fragment>
     );
   }
 }
diff --git a/client/src/containers/Topic/Topic/TopicGroups/TopicGroups.jsx b/client/src/containers/Topic/Topic/TopicGroups/TopicGroups.jsx
index aabbe6dee..3ee1956fa 100644
--- a/client/src/containers/Topic/Topic/TopicGroups/TopicGroups.jsx
+++ b/client/src/containers/Topic/Topic/TopicGroups/TopicGroups.jsx
@@ -2,8 +2,8 @@ import React from 'react';
 import Table from '../../../../components/Table';
 import { uriTopicsGroups } from '../../../../utils/endpoints';
 import constants from '../../../../utils/constants';
-import Root from "../../../../components/Root";
-import {Link} from "react-router-dom";
+import Root from '../../../../components/Root';
+import {Link} from 'react-router-dom';
 
 class TopicGroups extends Root {
   state = {
diff --git a/client/src/containers/Topic/Topic/TopicLogs/TopicLogs.jsx b/client/src/containers/Topic/Topic/TopicLogs/TopicLogs.jsx
index d5dc5b8c4..c145943b1 100644
--- a/client/src/containers/Topic/Topic/TopicLogs/TopicLogs.jsx
+++ b/client/src/containers/Topic/Topic/TopicLogs/TopicLogs.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { uriTopicsLogs } from '../../../../utils/endpoints';
 import Table from '../../../../components/Table';
 import converters from '../../../../utils/converters';
-import Root from "../../../../components/Root";
+import Root from '../../../../components/Root';
 
 class TopicLogs extends Root {
   state = {
diff --git a/client/src/containers/Topic/Topic/TopicPartitions/TopicPartitions.jsx b/client/src/containers/Topic/Topic/TopicPartitions/TopicPartitions.jsx
index 096b2384e..87c201962 100644
--- a/client/src/containers/Topic/Topic/TopicPartitions/TopicPartitions.jsx
+++ b/client/src/containers/Topic/Topic/TopicPartitions/TopicPartitions.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { uriTopicsPartitions } from '../../../../utils/endpoints';
 import Table from '../../../../components/Table';
 import converters from '../../../../utils/converters';
-import Root from "../../../../components/Root";
+import Root from '../../../../components/Root';
 
 class TopicPartitions extends Root {
   state = {
diff --git a/client/src/containers/Topic/TopicCopy/TopicCopy.jsx b/client/src/containers/Topic/TopicCopy/TopicCopy.jsx
index e1fd7d290..bf105d29f 100644
--- a/client/src/containers/Topic/TopicCopy/TopicCopy.jsx
+++ b/client/src/containers/Topic/TopicCopy/TopicCopy.jsx
@@ -16,10 +16,10 @@ import {
 import './styles.scss';
 import {toast} from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-import Dropdown from "react-bootstrap/Dropdown";
-import DatePicker from "../../../components/DatePicker";
-import moment from "moment";
-import Input from "../../../components/Form/Input";
+import Dropdown from 'react-bootstrap/Dropdown';
+import DatePicker from '../../../components/DatePicker';
+import moment from 'moment';
+import Input from '../../../components/Form/Input';
 
 class TopicCopy extends Form {
   state = {
diff --git a/client/src/containers/Topic/TopicList/TopicList.jsx b/client/src/containers/Topic/TopicList/TopicList.jsx
index 5b9db1d3e..7ba71a6c7 100644
--- a/client/src/containers/Topic/TopicList/TopicList.jsx
+++ b/client/src/containers/Topic/TopicList/TopicList.jsx
@@ -1,21 +1,26 @@
 import React from 'react';
-import {Link} from 'react-router-dom';
+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 {uriConsumerGroupByTopics, uriDeleteTopics, uriTopicLastRecord, uriTopics} from '../../../utils/endpoints';
+import {
+  uriConsumerGroupByTopics,
+  uriDeleteTopics,
+  uriTopicLastRecord,
+  uriTopics
+} from '../../../utils/endpoints';
 import constants from '../../../utils/constants';
-import {calculateTopicOffsetLag, showBytes} from '../../../utils/converters';
+import { calculateTopicOffsetLag, showBytes } from '../../../utils/converters';
 import './styles.scss';
-import {toast} from 'react-toastify';
+import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-import {Collapse} from 'react-bootstrap';
+import { Collapse } from 'react-bootstrap';
 import Root from '../../../components/Root';
 import DateTime from '../../../components/DateTime';
-import {getClusterUIOptions} from '../../../utils/functions';
-import {handlePageChange, getPageNumber} from './../../../utils/pagination';
+import { getClusterUIOptions } from '../../../utils/functions';
+import { handlePageChange, getPageNumber } from './../../../utils/pagination';
 import PageSize from '../../../components/PageSize';
 
 class TopicList extends Root {
@@ -49,16 +54,16 @@ class TopicList extends Root {
   };
 
   componentDidMount() {
-   this._initializeVars(() => {
-     this.getTopics();
-     this.props.history.replace({
-       pathname: `/ui/${this.state.selectedCluster}/topic`,
-       search: this.props.location.search
-     })});
+    this._initializeVars(() => {
+      this.getTopics();
+      this.props.history.replace({
+        pathname: `/ui/${this.state.selectedCluster}/topic`,
+        search: this.props.location.search
+      });
+    });
   }
 
-  componentDidUpdate(prevProps, prevState) {
-
+  componentDidUpdate(prevProps) {
     if (this.props.location.pathname !== prevProps.location.pathname) {
       this.cancelAxiosRequests();
       this.renewCancelToken();
@@ -71,36 +76,44 @@ class TopicList extends Root {
 
   async _initializeVars(callBackFunction) {
     const { clusterId } = this.props.match.params;
-    const query =  new URLSearchParams(this.props.location.search);
-    const {searchData, keepSearch} = this.state;
+    const query = new URLSearchParams(this.props.location.search);
+    const { searchData, keepSearch } = this.state;
     let { pageNumber } = this.state;
     let { currentPageSize } = this.state;
-    const uiOptions = await getClusterUIOptions(clusterId)
+    const uiOptions = await getClusterUIOptions(clusterId);
 
     let searchDataTmp;
     let keepSearchTmp = keepSearch;
     const topicListSearch = localStorage.getItem('topicListSearch');
-    if(topicListSearch) {
+    if (topicListSearch) {
       searchDataTmp = JSON.parse(topicListSearch);
       keepSearchTmp = true;
     } else {
       searchDataTmp = {
-        search: (query.get('search'))? query.get('search') : searchData.search,
-        topicListView: (query.get('topicListView'))? query.get('topicListView') :
-            (uiOptions && uiOptions.topic && uiOptions.topic.defaultView)? uiOptions.topic.defaultView : searchData.topicListView,
-      }
-      pageNumber = (query.get('page'))? parseInt(query.get('page')) : parseInt(pageNumber)
-      currentPageSize = (query.get('uiPageSize'))? parseInt(query.get('uiPageSize')) : parseInt(currentPageSize)
+        search: query.get('search') ? query.get('search') : searchData.search,
+        topicListView: query.get('topicListView')
+          ? query.get('topicListView')
+          : uiOptions && uiOptions.topic && uiOptions.topic.defaultView
+          ? uiOptions.topic.defaultView
+          : searchData.topicListView
+      };
+      pageNumber = query.get('page') ? parseInt(query.get('page')) : parseInt(pageNumber);
+      currentPageSize = query.get('uiPageSize')
+        ? parseInt(query.get('uiPageSize'))
+        : parseInt(currentPageSize);
     }
 
-    this.setState({
-      selectedCluster: clusterId, 
-      searchData: searchDataTmp,
-      keepSearch: keepSearchTmp,
-      uiOptions: uiOptions ?? {},
-      pageNumber: pageNumber,
-      currentPageSize: currentPageSize
-    }, callBackFunction);
+    this.setState(
+      {
+        selectedCluster: clusterId,
+        searchData: searchDataTmp,
+        keepSearch: keepSearchTmp,
+        uiOptions: uiOptions ?? {},
+        pageNumber: pageNumber,
+        currentPageSize: currentPageSize
+      },
+      callBackFunction
+    );
   }
 
   showDeleteModal = deleteMessage => {
@@ -136,13 +149,13 @@ class TopicList extends Root {
     const { searchData } = data;
 
     this.setState({ pageNumber: 1, searchData }, () => {
+      const { topicListView } = this.state.searchData;
       this.getTopics();
       this.handleKeepSearchChange(data.keepSearch);
       this.props.history.push({
         pathname: `/ui/${this.state.selectedCluster}/topic`,
-        search: `search=${searchData.search}&topicListView=${this.state.searchData.topicListView}&page=${this.state.pageNumber}`
+        search: `search=${searchData.search}&topicListView=${topicListView}&page=${this.state.pageNumber}`
       });
-
     });
   };
 
@@ -150,21 +163,23 @@ class TopicList extends Root {
     let pageNumber = getPageNumber(value, this.state.totalPageNumber);
 
     this.setState({ pageNumber: pageNumber }, () => {
+      const { search, topicListView } = this.state.searchData;
       this.getTopics();
       this.props.history.push({
         pathname: `/ui/${this.state.selectedCluster}/topic`,
-        search: `search=${this.state.searchData.search}&topicListView=${this.state.searchData.topicListView}&page=${pageNumber}`
+        search: `search=${search}&topicListView=${topicListView}&page=${pageNumber}`
       });
     });
   };
 
   handlePageSizeChangeSubmission = value => {
     let pageNumber = 1;
-    this.setState({ currentPageSize: value, pageNumber: pageNumber},() => {
+    this.setState({ currentPageSize: value, pageNumber: pageNumber }, () => {
+      const { search, topicListView } = this.state.searchData;
       this.getTopics();
       this.props.history.push({
         pathname: `/ui/${this.state.selectedCluster}/topic`,
-        search: `search=${this.state.searchData.search}&topicListView=${this.state.searchData.topicListView}&uiPageSize=${value}`
+        search: `search=${search}&topicListView=${topicListView}&uiPageSize=${value}`
       });
     });
   };
@@ -172,9 +187,11 @@ class TopicList extends Root {
   async getTopics() {
     const { selectedCluster, pageNumber, currentPageSize } = this.state;
     const { search, topicListView } = this.state.searchData;
-    this.setState({ loading: true } );
+    this.setState({ loading: true });
 
-    let response = await this.getApi(uriTopics(selectedCluster, search, topicListView, pageNumber, currentPageSize));
+    let response = await this.getApi(
+      uriTopics(selectedCluster, search, topicListView, pageNumber, currentPageSize)
+    );
     let data = response.data;
 
     if (data) {
@@ -183,9 +200,14 @@ class TopicList extends Root {
       } else {
         this.setState({ topics: [] });
       }
-      this.setState({ selectedCluster, totalPageNumber: data.page, currentPageSize: data.pageSize, loading: false }  )
+      this.setState({
+        selectedCluster,
+        totalPageNumber: data.page,
+        currentPageSize: data.pageSize,
+        loading: false
+      });
     } else {
-      this.setState({ topics: [], loading: false, totalPageNumber: 0});
+      this.setState({ topics: [], loading: false, totalPageNumber: 0 });
     }
   }
 
@@ -196,9 +218,9 @@ class TopicList extends Root {
     const { selectedCluster, uiOptions } = this.state;
     const uiOptionsTopic = uiOptions.topic ?? {};
 
-    const setState = () =>  {
+    const setState = () => {
       this.setState({ topics: Object.values(tableTopics) });
-    }
+    };
 
     topics.forEach(topic => {
       tableTopics[topic.name] = {
@@ -212,222 +234,245 @@ class TopicList extends Root {
         replicationInSync: topic.inSyncReplicaCount,
         groupComponent: undefined,
         internal: topic.internal
-      }
-      collapseConsumerGroups[topic.name] = (uiOptionsTopic.showAllConsumerGroups)  ? true : false;
+      };
+      collapseConsumerGroups[topic.name] = uiOptionsTopic.showAllConsumerGroups ? true : false;
     });
-    this.setState({collapseConsumerGroups});
-    setState()
-
-    const topicsName = topics.map(topic => topic.name).join(",");
-
-    if(!uiOptionsTopic.skipConsumerGroups) {
-      this.getApi(uriConsumerGroupByTopics(selectedCluster, encodeURIComponent(topicsName)))
-          .then(value => {
-            topics.forEach(topic => {
-              tableTopics[topic.name].groupComponent = (value && value.data) ? value.data.filter(consumerGroup =>
-                  (consumerGroup.activeTopics && consumerGroup.activeTopics.includes(topic.name))
-                  || (consumerGroup.topics && consumerGroup.topics.includes(topic.name))) : [];
-            });
-            setState();
+    this.setState({ collapseConsumerGroups });
+    setState();
+
+    const topicsName = topics.map(topic => topic.name).join(',');
+
+    if (!uiOptionsTopic.skipConsumerGroups) {
+      this.getApi(uriConsumerGroupByTopics(selectedCluster, encodeURIComponent(topicsName))).then(
+        value => {
+          topics.forEach(topic => {
+            tableTopics[topic.name].groupComponent =
+              value && value.data
+                ? value.data.filter(
+                    consumerGroup =>
+                      (consumerGroup.activeTopics &&
+                        consumerGroup.activeTopics.includes(topic.name)) ||
+                      (consumerGroup.topics && consumerGroup.topics.includes(topic.name))
+                  )
+                : [];
           });
+          setState();
+        }
+      );
     }
 
-    if(!uiOptionsTopic.skipLastRecord) {
-      this.getApi(uriTopicLastRecord(selectedCluster, encodeURIComponent(topicsName)))
-          .then(value => {
-            topics.forEach((topic) => {
-              tableTopics[topic.name].lastWrite = value.data[topic.name] ? value.data[topic.name].timestamp : ''
-            });
-            setState();
+    if (!uiOptionsTopic.skipLastRecord) {
+      this.getApi(uriTopicLastRecord(selectedCluster, encodeURIComponent(topicsName))).then(
+        value => {
+          topics.forEach(topic => {
+            tableTopics[topic.name].lastWrite = value.data[topic.name]
+              ? value.data[topic.name].timestamp
+              : '';
           });
+          setState();
+        }
+      );
     }
   }
 
-
-
   handleConsumerGroups = (consumerGroups, topicId) => {
     if (consumerGroups && consumerGroups.length > 0) {
       return consumerGroups.map(consumerGroup => {
         let className = 'btn btn-sm mb-1 mr-1 btn-';
         let offsetLag = calculateTopicOffsetLag(consumerGroup.offsets, topicId);
 
-          const activeTopic = consumerGroup.activeTopics && consumerGroup.activeTopics.find(
-              activeTopic => activeTopic === topicId
-          );
-          activeTopic ? (className += 'success') : (className += 'warning');
-
-          const noPropagation = e => e.stopPropagation();
-
-          return (
-            <Link
-              key={consumerGroup.id}
-              to={`/ui/${this.state.selectedCluster}/group/${encodeURIComponent(consumerGroup.id)}`}
-              className={className}
-              onClick={noPropagation}
-            >
-              {consumerGroup.id} <div className="badge badge-secondary"> Lag: {Number(offsetLag).toLocaleString()}</div>
-            </Link>
-          );
+        const activeTopic =
+          consumerGroup.activeTopics &&
+          consumerGroup.activeTopics.find(activeTopic => activeTopic === topicId);
+        activeTopic ? (className += 'success') : (className += 'warning');
+
+        const noPropagation = e => e.stopPropagation();
+
+        return (
+          <Link
+            key={consumerGroup.id}
+            to={`/ui/${this.state.selectedCluster}/group/${encodeURIComponent(consumerGroup.id)}`}
+            className={className}
+            onClick={noPropagation}
+          >
+            {consumerGroup.id}{' '}
+            <div className="badge badge-secondary"> Lag: {Number(offsetLag).toLocaleString()}</div>
+          </Link>
+        );
       });
     }
 
     return '';
   };
 
-
   handleCollapseConsumerGroups(id) {
     const tmpGroups = {};
 
     Object.keys(this.state.collapseConsumerGroups).forEach(key => {
-      tmpGroups[key] = (key === id)?  !this.state.collapseConsumerGroups[key] : this.state.collapseConsumerGroups[key];
-     });
-     this.setState({collapseConsumerGroups : tmpGroups});
-   }
+      tmpGroups[key] =
+        key === id
+          ? !this.state.collapseConsumerGroups[key]
+          : this.state.collapseConsumerGroups[key];
+    });
+    this.setState({ collapseConsumerGroups: tmpGroups });
+  }
 
-  handleKeepSearchChange(value){
+  handleKeepSearchChange(value) {
     const { searchData } = this.state;
-    if(value) {
+    if (value) {
       localStorage.setItem('topicListSearch', JSON.stringify(searchData));
     } else {
       localStorage.removeItem('topicListSearch');
     }
-
   }
 
   render() {
-    const { topics, selectedCluster, searchData, pageNumber, totalPageNumber, currentPageSize, loading, collapseConsumerGroups, keepSearch, uiOptions } = this.state;
+    const {
+      topics,
+      selectedCluster,
+      searchData,
+      pageNumber,
+      totalPageNumber,
+      currentPageSize,
+      loading,
+      collapseConsumerGroups,
+      keepSearch,
+      uiOptions
+    } = this.state;
     const uiOptionsTopic = uiOptions.topic ?? {};
-    const dateTimeFormat = uiOptions.topicData && uiOptions.topicData.dateTimeFormat ?
-      uiOptions.topicData.dateTimeFormat :
-      constants.SETTINGS_VALUES.TOPIC_DATA.DATE_TIME_FORMAT.RELATIVE;
+    const dateTimeFormat =
+      uiOptions.topicData && uiOptions.topicData.dateTimeFormat
+        ? uiOptions.topicData.dateTimeFormat
+        : constants.SETTINGS_VALUES.TOPIC_DATA.DATE_TIME_FORMAT.RELATIVE;
     const roles = this.state.roles || {};
     const { clusterId } = this.props.match.params;
-    
-
-    const topicCols =
-        [
-          {
-            id: 'name',
-            accessor: 'name',
-            colName: 'Name',
-            type: 'text'
-          },
-          {
-            id: 'count',
-            accessor: 'count',
-            colName: 'Count',
-            type: 'text',
-            cell: (obj, col) => {
-              return <span className="text-nowrap">≈ {obj[col.accessor]}</span>;
-            }
-          },
-          {
-            id: 'size',
-            accessor: 'size',
-            colName: 'Size',
-            type: 'text'
-          }
-        ];
-
-    if(!uiOptionsTopic.skipLastRecord) {
-        topicCols.push({
-          id: 'lastWrite',
-          accessor: 'lastWrite',
-          colName: 'Last Record',
-          type: 'text',
-          cell: (obj, col) => {
-            return obj[col.accessor] ?
-              <DateTime isoDateTimeString={obj[col.accessor]} dateTimeFormat={dateTimeFormat} /> :
-              '';
-          }
-        });
+
+    const topicCols = [
+      {
+        id: 'name',
+        accessor: 'name',
+        colName: 'Name',
+        type: 'text'
+      },
+      {
+        id: 'count',
+        accessor: 'count',
+        colName: 'Count',
+        type: 'text',
+        cell: (obj, col) => {
+          return <span className="text-nowrap">≈ {obj[col.accessor]}</span>;
+        }
+      },
+      {
+        id: 'size',
+        accessor: 'size',
+        colName: 'Size',
+        type: 'text'
+      }
+    ];
+
+    if (!uiOptionsTopic.skipLastRecord) {
+      topicCols.push({
+        id: 'lastWrite',
+        accessor: 'lastWrite',
+        colName: 'Last Record',
+        type: 'text',
+        cell: (obj, col) => {
+          return obj[col.accessor] ? (
+            <DateTime isoDateTimeString={obj[col.accessor]} dateTimeFormat={dateTimeFormat} />
+          ) : (
+            ''
+          );
+        }
+      });
     }
 
-    const partitionCols =
-        [
-          {
-            id: 'partitionsTotal',
-            accessor: 'partitionsTotal',
-            colName: 'Total',
-            type: 'text'
-          }];
-    const replicationCols =
-         [
-          {
-            id: 'replicationFactor',
-            accessor: 'replicationFactor',
-            colName: 'Factor',
-            type: 'text'
-          },
-          {
-            id: 'replicationInSync',
-            accessor: 'replicationInSync',
-            colName: 'In Sync',
-            type: 'text',
-            cell: (obj, col) => {
-              return <span>{obj[col.accessor]}</span>;
-            }
-          }];
-
-    const consumerGprCols =
-        [
-          {
-            id: 'groupComponent',
-            accessor: 'groupComponent.id',
-            colName: 'Consumer Groups',
-            type: 'text',
-            cell: obj => {
-              if (obj.groupComponent && obj.groupComponent.length > 0) {
-                const consumerGroups = this.handleConsumerGroups(obj.groupComponent, obj.id);
-                let i = 0;
-                return (
-                    <>
-                      {consumerGroups[0]}
-                      {consumerGroups.length > 1 &&
-                      <span>
-                                  <span
-                                      onClick={() => this.handleCollapseConsumerGroups(obj.id)}
-                                      aria-expanded={collapseConsumerGroups[obj.id]}
-                                  >
-                                    {collapseConsumerGroups[obj.id] && <i className="fa fa-fw fa-chevron-up"/>}
-                                    {!collapseConsumerGroups[obj.id] && <i className="fa fa-fw fa-chevron-down"/>}
-                                  </span>
-                                  <span className="badge badge-secondary">{consumerGroups.length}</span>
-                                  <Collapse in={collapseConsumerGroups[obj.id]}>
-                                    <div>
-                                      {consumerGroups.splice(1, consumerGroups.length).map(group => {
-                                        return (<div key={i++}>{group}</div>);
-                                      })}
-                                    </div>
-                                  </Collapse>
-                                </span>
-                      }
-                    </>
-                );
-              } else if (obj.groupComponent) {
-                return <div className="empty-consumergroups"/>
-              }
-            }
+    const partitionCols = [
+      {
+        id: 'partitionsTotal',
+        accessor: 'partitionsTotal',
+        colName: 'Total',
+        type: 'text'
+      }
+    ];
+    const replicationCols = [
+      {
+        id: 'replicationFactor',
+        accessor: 'replicationFactor',
+        colName: 'Factor',
+        type: 'text'
+      },
+      {
+        id: 'replicationInSync',
+        accessor: 'replicationInSync',
+        colName: 'In Sync',
+        type: 'text',
+        cell: (obj, col) => {
+          return <span>{obj[col.accessor]}</span>;
+        }
+      }
+    ];
+
+    const consumerGprCols = [
+      {
+        id: 'groupComponent',
+        accessor: 'groupComponent.id',
+        colName: 'Consumer Groups',
+        type: 'text',
+        cell: obj => {
+          if (obj.groupComponent && obj.groupComponent.length > 0) {
+            const consumerGroups = this.handleConsumerGroups(obj.groupComponent, obj.id);
+            let i = 0;
+            return (
+              <>
+                {consumerGroups[0]}
+                {consumerGroups.length > 1 && (
+                  <span>
+                    <span
+                      onClick={() => this.handleCollapseConsumerGroups(obj.id)}
+                      aria-expanded={collapseConsumerGroups[obj.id]}
+                    >
+                      {collapseConsumerGroups[obj.id] && <i className="fa fa-fw fa-chevron-up" />}
+                      {!collapseConsumerGroups[obj.id] && (
+                        <i className="fa fa-fw fa-chevron-down" />
+                      )}
+                    </span>
+                    <span className="badge badge-secondary">{consumerGroups.length}</span>
+                    <Collapse in={collapseConsumerGroups[obj.id]}>
+                      <div>
+                        {consumerGroups.splice(1, consumerGroups.length).map(group => {
+                          return <div key={i++}>{group}</div>;
+                        })}
+                      </div>
+                    </Collapse>
+                  </span>
+                )}
+              </>
+            );
+          } else if (obj.groupComponent) {
+            return <div className="empty-consumergroups" />;
           }
-        ]
+        }
+      }
+    ];
 
     const firstColumns = [
-      {colName: 'Topics', colSpan: topicCols.length},
-      {colName: 'Partitions', colSpan: partitionCols.length},
-      {colName: 'Replications', colSpan: replicationCols.length}
+      { colName: 'Topics', colSpan: topicCols.length },
+      { colName: 'Partitions', colSpan: partitionCols.length },
+      { colName: 'Replications', colSpan: replicationCols.length }
     ];
 
-    if(!uiOptionsTopic.skipConsumerGroups) {
-      firstColumns.push({colName: 'Consumer Groups', colSpan: 1});
+    if (!uiOptionsTopic.skipConsumerGroups) {
+      firstColumns.push({ colName: 'Consumer Groups', colSpan: 1 });
     }
 
     let onDetailsFunction = undefined;
     const actions = [constants.TABLE_CONFIG];
-    if(roles.topic && roles.topic['topic/data/read']) {
+    if (roles.topic && roles.topic['topic/data/read']) {
       actions.push(constants.TABLE_DETAILS);
-      onDetailsFunction = (id) => `/ui/${selectedCluster}/topic/${id}/data`;
+      onDetailsFunction = id => `/ui/${selectedCluster}/topic/${id}/data`;
     }
-    if(roles.topic && roles.topic['topic/delete']) {
+    if (roles.topic && roles.topic['topic/delete']) {
       actions.push(constants.TABLE_DELETE);
     }
 
@@ -453,9 +498,9 @@ class TopicList extends Root {
               this.setState(searchData);
             }}
             onKeepSearchChange={value => {
-                this.handleKeepSearchChange(value);
-              }}
-              doSubmit={this.handleSearch}
+              this.handleKeepSearchChange(value);
+            }}
+            doSubmit={this.handleSearch}
           />
 
           <PageSize
@@ -464,7 +509,7 @@ class TopicList extends Root {
             currentPageSize={this.state.currentPageSize}
             onChange={this.handlePageSizeChangeSubmission}
           />
-          
+
           <Pagination
             pageNumber={pageNumber}
             totalPageNumber={totalPageNumber}
@@ -479,7 +524,11 @@ class TopicList extends Root {
           history={this.props.history}
           has2Headers
           firstHeader={firstColumns}
-          columns={topicCols.concat(partitionCols, replicationCols, (uiOptionsTopic.skipConsumerGroups)?[]: consumerGprCols)}
+          columns={topicCols.concat(
+            partitionCols,
+            replicationCols,
+            uiOptionsTopic.skipConsumerGroups ? [] : consumerGprCols
+          )}
           data={topics}
           updateData={data => {
             this.setState({ topics: data });
@@ -488,7 +537,7 @@ class TopicList extends Root {
             this.handleOnDelete(topic);
           }}
           onDetails={onDetailsFunction}
-          onConfig={(id) => `/ui/${selectedCluster}/topic/${id}/configs`}
+          onConfig={id => `/ui/${selectedCluster}/topic/${id}/configs`}
           actions={actions}
         />
 
diff --git a/client/src/containers/Topic/TopicProduce/TopicProduce.jsx b/client/src/containers/Topic/TopicProduce/TopicProduce.jsx
index ee6f32ace..55884e37a 100644
--- a/client/src/containers/Topic/TopicProduce/TopicProduce.jsx
+++ b/client/src/containers/Topic/TopicProduce/TopicProduce.jsx
@@ -52,24 +52,12 @@ class TopicProduce extends Form {
   };
 
   schema = {
-    partition: Joi.number()
-      .allow(null)
-      .label('Partition'),
-    key: Joi.string()
-      .allow('')
-      .label('Key'),
-    hKey0: Joi.string()
-      .allow('')
-      .label('hKey0'),
-    hValue0: Joi.string()
-      .allow('')
-      .label('hValue0'),
-    value: Joi.string()
-      .allow('')
-      .label('Value'),
-    keyValueSeparator: Joi.string()
-      .min(1)
-      .label('keyValueSeparator')
+    partition: Joi.number().allow(null).label('Partition'),
+    key: Joi.string().allow('').label('Key'),
+    hKey0: Joi.string().allow('').label('hKey0'),
+    hValue0: Joi.string().allow('').label('hValue0'),
+    value: Joi.string().allow('').label('Value'),
+    keyValueSeparator: Joi.string().min(1).label('keyValueSeparator')
   };
 
   async componentDidMount() {
@@ -79,16 +67,16 @@ class TopicProduce extends Form {
     let partitions = response.data.map(item => {
       return { name: item.id, _id: Number(item.id) };
     });
-    partitions.unshift({name: 'auto assign', _id: null});
+    partitions.unshift({ name: 'auto assign', _id: null });
 
-    this.setState(({
+    this.setState({
       partitions,
       topicId,
       formData: {
         ...this.state.formData,
-        partition: partitions[0]._id,
-      },
-    }));
+        partition: partitions[0]._id
+      }
+    });
 
     await this.getPreferredSchemaForTopic();
     const topicEventData = popProduceToTopicValues();
@@ -102,21 +90,21 @@ class TopicProduce extends Form {
   }
 
   async initAvailableTopics() {
-    const {clusterId} = this.props.match.params;
+    const { clusterId } = this.props.match.params;
 
     const topics = [];
     let page = 0;
     let topicResponseData = {};
     do {
       page = page + 1;
-      topicResponseData = await this.getApi(uriTopics(clusterId, '', '', page))
-          .then(res => res.data);
-      topicResponseData.results
-          .forEach(topicData => topics.push(topicData.name));
-    } while(page < topicResponseData.pages);
+      topicResponseData = await this.getApi(uriTopics(clusterId, '', '', page)).then(
+        res => res.data
+      );
+      topicResponseData.results.forEach(topicData => topics.push(topicData.name));
+    } while (page < topicResponseData.pages);
 
     this.setState({
-      topics,
+      topics
     });
   }
 
@@ -131,20 +119,20 @@ class TopicProduce extends Form {
   }
 
   async initByTopicEvent(copyValues) {
-    const {header, keySchemaId, valueSchemaId, ...topicValuesDefault} = copyValues;
+    const { header, keySchemaId, valueSchemaId, ...topicValuesDefault } = copyValues;
 
     const keySchema = this.state.keySchema.find(schema => schema.id === keySchemaId);
     const valueSchema = this.state.valueSchema.find(schema => schema.id === valueSchemaId);
 
-    this.setState(({
+    this.setState({
       formData: {
         ...this.state.formData,
-        ...topicValuesDefault,
+        ...topicValuesDefault
       },
       selectedKeySchema: keySchema ? keySchema.subject : '',
       selectedValueSchema: valueSchema ? valueSchema.subject : '',
       nHeaders: Object.keys(header).length ? 0 : 1
-    }));
+    });
 
     Object.entries(header).forEach(([key, value]) => this.handlePlus(key, value));
   }
@@ -169,7 +157,7 @@ class TopicProduce extends Form {
     if (tombstone) {
       value = null;
     } else {
-      value = multiMessage ? formData.value : JSON.parse(JSON.stringify(formData.value))
+      value = multiMessage ? formData.value : JSON.parse(JSON.stringify(formData.value));
     }
     const topic = {
       clusterId,
@@ -198,13 +186,12 @@ class TopicProduce extends Form {
 
     topic.headers = headers;
 
-    this.postApi(uriTopicsProduce(clusterId, topicId), topic)
-      .then(() => {
-        this.props.history.push({
-          pathname: `/ui/${clusterId}/topic/${topicId}`,
-        });
-        toast.success(`Produced to ${topicId}.`);
+    this.postApi(uriTopicsProduce(clusterId, topicId), topic).then(() => {
+      this.props.history.push({
+        pathname: `/ui/${clusterId}/topic/${topicId}`
       });
+      toast.success(`Produced to ${topicId}.`);
+    });
   }
 
   renderMultiMessage(tombstone) {
@@ -213,37 +200,40 @@ class TopicProduce extends Form {
     return (
       <div className="form-group row">
         <label className="col-sm-2 col-form-label">Multi message</label>
-          <div className="row khq-multiple col-sm-7">
-            {this.renderCheckbox(
-              'isMultiMessage',
-              '',
-              multiMessage,
-              () => {
-                this.setState({multiMessage: !multiMessage,
-                  valuePlaceholder: this.getPlaceholderValue(!multiMessage, formData.keyValueSeparator)})
-              },
-              false,
-              { disabled: tombstone }
-            )}
+        <div className="row khq-multiple col-sm-7">
+          {this.renderCheckbox(
+            'isMultiMessage',
+            '',
+            multiMessage,
+            () => {
+              this.setState({
+                multiMessage: !multiMessage,
+                valuePlaceholder: this.getPlaceholderValue(
+                  !multiMessage,
+                  formData.keyValueSeparator
+                )
+              });
+            },
+            false,
+            { disabled: tombstone }
+          )}
 
-            <label className="col-auto col-form-label">Separator</label>
-            <input
-                type='text'
-                name='keyValueSeparator'
-                id='keyValueSeparator'
-                placeholder=':'
-                className='col-sm-2 form-control'
-                disabled={ !multiMessage }
-                onChange={
-                    event => {
-                        this.setState({
-                            formData: { ...formData,
-                                keyValueSeparator: event.target.value},
-                            valuePlaceholder: this.getPlaceholderValue(!multiMessage, event.target.value)})
-                    }
-                }
-            />
-          </div>
+          <label className="col-auto col-form-label">Separator</label>
+          <input
+            type="text"
+            name="keyValueSeparator"
+            id="keyValueSeparator"
+            placeholder=":"
+            className="col-sm-2 form-control"
+            disabled={!multiMessage}
+            onChange={event => {
+              this.setState({
+                formData: { ...formData, keyValueSeparator: event.target.value },
+                valuePlaceholder: this.getPlaceholderValue(!multiMessage, event.target.value)
+              });
+            }}
+          />
+        </div>
       </div>
     );
   }
@@ -252,30 +242,36 @@ class TopicProduce extends Form {
     const { tombstone } = this.state;
 
     return (
-        <div className="form-group row">
-          <label className="col-sm-2 col-form-label">Tombstone</label>
-          <div className="row khq-multiple col-sm-7">
-            {this.renderCheckbox(
-                'isTombstone',
-                '',
-                tombstone,
-                () => {
-                  this.setState({tombstone: !tombstone} )
-                },
-                false,
-                { disabled: multiMessage }
-            )}
-          </div>
+      <div className="form-group row">
+        <label className="col-sm-2 col-form-label">Tombstone</label>
+        <div className="row khq-multiple col-sm-7">
+          {this.renderCheckbox(
+            'isTombstone',
+            '',
+            tombstone,
+            () => {
+              this.setState({ tombstone: !tombstone });
+            },
+            false,
+            { disabled: multiMessage }
+          )}
         </div>
+      </div>
     );
   }
 
   getPlaceholderValue(isMultiMessage, keyValueSeparator) {
-    if(isMultiMessage) {
-      return 'key1' + keyValueSeparator + '{"param": "value1"}\n'
-        + 'key2' + keyValueSeparator + '{"param": "value2"}';
+    if (isMultiMessage) {
+      return (
+        'key1' +
+        keyValueSeparator +
+        '{"param": "value1"}\n' +
+        'key2' +
+        keyValueSeparator +
+        '{"param": "value2"}'
+      );
     } else {
-        return '{"param": "value"}';
+      return '{"param": "value"}';
     }
   }
 
@@ -343,16 +339,12 @@ class TopicProduce extends Form {
     let newFormData = {
       ...formData,
       [`hKey${nHeaders}`]: providedKey || '',
-      [`hValue${nHeaders}`]: providedValue || '',
+      [`hValue${nHeaders}`]: providedValue || ''
     };
     this.schema = {
       ...this.schema,
-      [`hKey${nHeaders}`]: Joi.string()
-        .min(1)
-        .label(`hKey${nHeaders}`),
-      [`hValue${nHeaders}`]: Joi.string()
-        .min(1)
-        .label(`hValue${nHeaders}`)
+      [`hKey${nHeaders}`]: Joi.string().min(1).label(`hKey${nHeaders}`),
+      [`hValue${nHeaders}`]: Joi.string().min(1).label(`hValue${nHeaders}`)
     };
     this.setState({ nHeaders: this.state.nHeaders + 1, formData: newFormData });
   }
@@ -384,14 +376,16 @@ class TopicProduce extends Form {
             .map((key, index) => {
               let selected = selectedValue === key ? 'selected' : '';
               return (
-                <li>
+                <li key={index}>
                   <Tooltip
                     title={
-                      selectedValue === key && tag !== 'topicId' ? 'Click to unselect option' : 'Click to select option'
+                      selectedValue === key && tag !== 'topicId'
+                        ? 'Click to unselect option'
+                        : 'Click to select option'
                     }
                   >
                     <div
-                      onClick={e => {
+                      onClick={() => {
                         if (tag === 'key') {
                           selectedValue === key
                             ? this.setState({ selectedKeySchema: '' })
@@ -401,8 +395,8 @@ class TopicProduce extends Form {
                             ? this.setState({ selectedValueSchema: '' })
                             : this.setState({ selectedValueSchema: key });
                         } else if (tag === 'topicId') {
-                          if( selectedValue !== key) {
-                            this.setState({topicId: key});
+                          if (selectedValue !== key) {
+                            this.setState({ topicId: key });
                             this.getPreferredSchemaForTopic();
                           }
                         }
@@ -444,47 +438,58 @@ class TopicProduce extends Form {
     return (
       <div>
         <form encType="multipart/form-data" className="khq-form khq-form-config">
-            <Header title={`Produce to ${topicId} `} />
-            {this.renderDropdown(
-                'Topic',
-                topics,
-                topicsSearchValue,
-                topicId,
-                value => {
-                  this.setState({
-                    topicsSearchValue: value.target.value
-                  });
-                },
-                this.renderResults(
-                    topics,
-                    topicsSearchValue,
-                    topicId,
-                    'topicId'
-                )
-            )}
-            {this.renderSelect('partition', 'Partition', partitions, value => {
+          <Header title={`Produce to ${topicId} `} />
+          {this.renderDropdown(
+            'Topic',
+            topics,
+            topicsSearchValue,
+            topicId,
+            value => {
+              this.setState({
+                topicsSearchValue: value.target.value
+              });
+            },
+            this.renderResults(topics, topicsSearchValue, topicId, 'topicId')
+          )}
+          {this.renderSelect(
+            'partition',
+            'Partition',
+            partitions,
+            value => {
               this.setState({ formData: { ...formData, partition: value.target.value } });
-            }, 'col-sm-10')}
-            {this.renderDropdown(
-              'Key schema',
+            },
+            'col-sm-10'
+          )}
+          {this.renderDropdown(
+            'Key schema',
+            keySchema.map(key => key.subject),
+            keySchemaSearchValue,
+            selectedKeySchema,
+            value => {
+              this.setState({
+                keySchemaSearchValue: value.target.value,
+                selectedKeySchema: value.target.value
+              });
+            },
+            this.renderResults(
               keySchema.map(key => key.subject),
               keySchemaSearchValue,
               selectedKeySchema,
-              value => {
-                this.setState({
-                  keySchemaSearchValue: value.target.value,
-                  selectedKeySchema: value.target.value
-                });
-              },
-              this.renderResults(
-                keySchema.map(key => key.subject),
-                keySchemaSearchValue,
-                selectedKeySchema,
-                'key'
-              )
-            )}
+              'key'
+            )
+          )}
 
-          {(this.renderInput('key', 'Key', 'Key', 'Key', undefined, undefined, undefined, undefined,{ disabled: multiMessage }))}
+          {this.renderInput(
+            'key',
+            'Key',
+            'Key',
+            'Key',
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            { disabled: multiMessage }
+          )}
 
           {this.renderHeaders()}
 
@@ -511,16 +516,20 @@ class TopicProduce extends Form {
 
           {this.renderTombstone(multiMessage)}
 
-          {this.renderJSONInput('value', 'Value', value => {
-            this.setState({
+          {this.renderJSONInput(
+            'value',
+            'Value',
+            value => {
+              this.setState({
                 formData: {
-                    ...formData,
-                    value: value
+                  ...formData,
+                  value: value
                 }
-            })},
-          multiMessage, // true -> 'text' mode; json, protobuff, ... mode otherwise
-          { placeholder: this.getPlaceholderValue(multiMessage, formData.keyValueSeparator) },
-          { readOnly: tombstone }
+              });
+            },
+            multiMessage, // true -> 'text' mode; json, protobuff, ... mode otherwise
+            { placeholder: this.getPlaceholderValue(multiMessage, formData.keyValueSeparator) },
+            { readOnly: tombstone }
           )}
           <div style={{ display: 'flex', flexDirection: 'row', width: '100%', padding: 0 }}>
             <label
@@ -607,4 +616,3 @@ class TopicProduce extends Form {
 }
 
 export default TopicProduce;
-
diff --git a/client/src/css/tables/table.scss b/client/src/css/tables/table.scss
index 3a53d1c8a..d1578e65f 100644
--- a/client/src/css/tables/table.scss
+++ b/client/src/css/tables/table.scss
@@ -9,7 +9,7 @@ div.khq-search-sse {
         .progress {
             border-radius: 0;
             flex-grow: 2;
-            margin-top: $table-cell-padding / 2;
+            margin-top: $table-cell-padding * 0.5;
 
 
             .progress-bar {