refactor: run 'prettier:fix' (#2064)

tchiotludo · Feb 4, 2025 · 2942aa3 · 2942aa3
1 parent d52bc00
commit 2942aa3
Show file tree

Hide file tree

Showing 5 changed files with 148 additions and 137 deletions.
diff --git a/client/src/components/SearchBar/SearchBar.jsx b/client/src/components/SearchBar/SearchBar.jsx
@@ -39,12 +39,13 @@ class SearchBar extends Form {
     groupsListViewOptions: [
       {
         _id: SETTINGS_VALUES.TOPIC.CONSUMER_GROUP_DEFAULT_VIEW.ALL,
-        name: "Show empty consumer groups"
+        name: 'Show empty consumer groups'
       },
       {
         _id: SETTINGS_VALUES.TOPIC.CONSUMER_GROUP_DEFAULT_VIEW.HIDE_EMPTY,
-        name: "Hide empty consumer groups"
-      }]
+        name: 'Hide empty consumer groups'
+      }
+    ]
   };
 
   schema = {};
@@ -56,8 +57,12 @@ class SearchBar extends Form {
   componentDidUpdate(prevProps) {
     const { search, topicListView, keepSearch, groupsListView } = this.props;
 
-    if (search !== prevProps.search || topicListView !== prevProps.topicListView
-        || keepSearch !== prevProps.keepSearch || groupsListView !== prevProps.groupsListView) {
+    if (
+      search !== prevProps.search ||
+      topicListView !== prevProps.topicListView ||
+      keepSearch !== prevProps.keepSearch ||
+      groupsListView !== prevProps.groupsListView
+    ) {
       this.setupProps();
     }
   }
@@ -168,22 +173,21 @@ class SearchBar extends Form {
                 'select-wrapper',
                 false
               )}
-            {showGroupsListView && (
-                this.renderSelect(
-                    'groupsListView',
-                    '',
-                    groupsListViewOptions,
-                    ({ currentTarget: input }) => {
-                      let { formData } = this.state;
-                      formData.groupsListView = input.value;
-                      this.setState();
-                      this.props.ongroupsListViewChange(input.value);
-                    },
-                    '',
-                    'select-wrapper',
-                    false
-                )
-            )}
+            {showGroupsListView &&
+              this.renderSelect(
+                'groupsListView',
+                '',
+                groupsListViewOptions,
+                ({ currentTarget: input }) => {
+                  let { formData } = this.state;
+                  formData.groupsListView = input.value;
+                  this.setState();
+                  this.props.ongroupsListViewChange(input.value);
+                },
+                '',
+                'select-wrapper',
+                false
+              )}
             <button className="btn btn-primary" type="submit">
               <FontAwesomeIcon icon={faSearch} />
               <span className="d-lg-none"> Search</span>

diff --git a/client/src/containers/Settings/Settings.jsx b/client/src/containers/Settings/Settings.jsx
@@ -34,10 +34,12 @@ class Settings extends Form {
   topicDataDateTimeFormat = Object.entries(SETTINGS_VALUES.TOPIC_DATA.DATE_TIME_FORMAT).map(
     ([value]) => ({ _id: value, name: value })
   );
-  groupsDefaultView = Object.entries(SETTINGS_VALUES.TOPIC.CONSUMER_GROUP_DEFAULT_VIEW).map(([value]) => ({
-    _id: value,
-    name: value
-  }));
+  groupsDefaultView = Object.entries(SETTINGS_VALUES.TOPIC.CONSUMER_GROUP_DEFAULT_VIEW).map(
+    ([value]) => ({
+      _id: value,
+      name: value
+    })
+  );
 
   schema = {
     topicDefaultView: Joi.string().optional(),

diff --git a/client/src/containers/Topic/Topic/TopicGroups/TopicGroups.jsx b/client/src/containers/Topic/Topic/TopicGroups/TopicGroups.jsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import Table from '../../../../components/Table';
 import { uriTopicsGroups } from '../../../../utils/endpoints';
-import constants, {SETTINGS_VALUES} from '../../../../utils/constants';
+import constants, { SETTINGS_VALUES } from '../../../../utils/constants';
 import Root from '../../../../components/Root';
 import { Link } from 'react-router-dom';
 import { withRouter } from '../../../../utils/withRouter.jsx';
-import SearchBar from "../../../../components/SearchBar/index.jsx";
-import {getClusterUIOptions} from "../../../../utils/functions.jsx";
+import SearchBar from '../../../../components/SearchBar/index.jsx';
+import { getClusterUIOptions } from '../../../../utils/functions.jsx';
 
 class TopicGroups extends Root {
   state = {
@@ -16,7 +16,7 @@ class TopicGroups extends Root {
     selectedCluster: this.props.clusterId,
     deleteMessage: '',
     loading: true,
-    groupsListView: 'ALL',
+    groupsListView: 'ALL'
   };
 
   componentDidMount() {
@@ -28,16 +28,20 @@ class TopicGroups extends Root {
     const uiOptions = await getClusterUIOptions(clusterId);
     const query = new URLSearchParams(this.props.location.search);
 
-    this.setState({groupsListView: query.get('groupsListView')
-        ? query.get('groupsListView')
-        : uiOptions && uiOptions.topic && uiOptions.topic.groupsDefaultView
+    this.setState(
+      {
+        groupsListView: query.get('groupsListView')
+          ? query.get('groupsListView')
+          : uiOptions && uiOptions.topic && uiOptions.topic.groupsDefaultView
             ? uiOptions.topic.groupsDefaultView
             : SETTINGS_VALUES.TOPIC.CONSUMER_GROUP_DEFAULT_VIEW.ALL
-    }, callBackFunction);
+      },
+      callBackFunction
+    );
   }
 
   async getConsumerGroup() {
-    const { selectedCluster, topicId, groupsListView} = this.state;
+    const { selectedCluster, topicId, groupsListView } = this.state;
     this.setState({ loading: true });
 
     let data = await this.getApi(uriTopicsGroups(selectedCluster, topicId, groupsListView));
@@ -48,7 +52,6 @@ class TopicGroups extends Root {
     }
   }
 
-
   handleSearch = () => {
     // Cancel previous requests if there are some to prevent UI issues
     this.cancelAxiosRequests();
@@ -60,7 +63,7 @@ class TopicGroups extends Root {
       pathname: `/ui/${this.state.selectedCluster}/topic/${this.state.topicId}/groups`,
       search: `groupsListView=${this.state.groupsListView}`
     });
-  }
+  };
 
   handleGroups(consumerGroups) {
     let tableConsumerGroups =
@@ -116,79 +119,79 @@ class TopicGroups extends Root {
     const { selectedCluster, loading, groupsListView } = this.state;
 
     return (
-        <div>
-          <nav className="navbar navbar-expand-lg navbar-light bg-light me-auto khq-data-filter khq-sticky khq-nav">
-            <SearchBar
-                showSearch={false}
-                showPagination={true}
-                showTopicListView={false}
-                showGroupsListView={true}
-                groupsListView={groupsListView}
-                ongroupsListViewChange={value => {
-                  this.setState({groupsListView: value});
-                }}
-                doSubmit={this.handleSearch}
-            />
-          </nav>
-            <Table
-                loading={loading}
-                columns={[
-                  {
-                    id: 'id',
-                    accessor: 'id',
-                    colName: 'Id',
-                    sortable: true
-                  },
-                  {
-                    id: 'state',
-                    accessor: 'state',
-                    colName: 'State',
-                    cell: obj => {
-                      return this.handleState(obj.state);
-                    }
-                  },
-                  {
-                    id: 'coordinator',
-                    accessor: 'coordinator',
-                    colName: 'Coordinator',
-                    cell: obj => {
-                      return this.handleCoordinator(obj.coordinator);
-                    }
-                  },
-                  {
-                    id: 'members',
-                    accessor: 'members',
-                    colName: 'Members',
-                    sortable: true
-                  },
-                  {
-                    id: 'topics',
-                    accessor: 'topics',
-                    colName: 'Topics',
-                    cell: obj => {
-                      if (obj.topics) {
-                        return this.handleTopics(obj.topics);
-                      }
-                    }
-                  }
-                ]}
-                data={this.state.consumerGroups}
-                updateData={data => {
-                  this.setState({consumerGroups: data});
-                }}
-                onDetails={id => {
-                  this.props.router.navigate(
-                      {
-                        pathname: `/ui/${selectedCluster}/group/${id}`
-                      },
-                      {replace: true}
-                  );
-                }}
-                actions={[constants.TABLE_DETAILS]}
-            />
-        </div>
-  );
-  }
+      <div>
+        <nav className="navbar navbar-expand-lg navbar-light bg-light me-auto khq-data-filter khq-sticky khq-nav">
+          <SearchBar
+            showSearch={false}
+            showPagination={true}
+            showTopicListView={false}
+            showGroupsListView={true}
+            groupsListView={groupsListView}
+            ongroupsListViewChange={value => {
+              this.setState({ groupsListView: value });
+            }}
+            doSubmit={this.handleSearch}
+          />
+        </nav>
+        <Table
+          loading={loading}
+          columns={[
+            {
+              id: 'id',
+              accessor: 'id',
+              colName: 'Id',
+              sortable: true
+            },
+            {
+              id: 'state',
+              accessor: 'state',
+              colName: 'State',
+              cell: obj => {
+                return this.handleState(obj.state);
+              }
+            },
+            {
+              id: 'coordinator',
+              accessor: 'coordinator',
+              colName: 'Coordinator',
+              cell: obj => {
+                return this.handleCoordinator(obj.coordinator);
+              }
+            },
+            {
+              id: 'members',
+              accessor: 'members',
+              colName: 'Members',
+              sortable: true
+            },
+            {
+              id: 'topics',
+              accessor: 'topics',
+              colName: 'Topics',
+              cell: obj => {
+                if (obj.topics) {
+                  return this.handleTopics(obj.topics);
+                }
+              }
+            }
+          ]}
+          data={this.state.consumerGroups}
+          updateData={data => {
+            this.setState({ consumerGroups: data });
+          }}
+          onDetails={id => {
+            this.props.router.navigate(
+              {
+                pathname: `/ui/${selectedCluster}/group/${id}`
+              },
+              { replace: true }
+            );
+          }}
+          actions={[constants.TABLE_DETAILS]}
+        />
+      </div>
+    );
   }
+}
 
-  export default withRouter(TopicGroups);
+export default withRouter(TopicGroups);
diff --git a/client/src/containers/Topic/TopicList/TopicList.jsx b/client/src/containers/Topic/TopicList/TopicList.jsx
@@ -11,7 +11,7 @@ import {
   uriTopicLastRecord,
   uriTopics
 } from '../../../utils/endpoints';
-import constants, {SETTINGS_VALUES} from '../../../utils/constants';
+import constants, { SETTINGS_VALUES } from '../../../utils/constants';
 import { calculateTopicOffsetLag, showBytes } from '../../../utils/converters';
 import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
@@ -288,26 +288,27 @@ class TopicList extends Root {
     const topicsName = topics.map(topic => topic.name).join(',');
 
     if (!uiOptionsTopic.skipConsumerGroups) {
-      const groupsListView = uiOptions && uiOptions.topic && uiOptions.topic.groupsDefaultView
+      const groupsListView =
+        uiOptions && uiOptions.topic && uiOptions.topic.groupsDefaultView
           ? uiOptions.topic.groupsDefaultView
-          : SETTINGS_VALUES.TOPIC.CONSUMER_GROUP_DEFAULT_VIEW.ALL
-
-      this.getApi(uriConsumerGroupByTopics(selectedCluster, encodeURIComponent(topicsName), groupsListView)).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();
-        }
-      );
+          : SETTINGS_VALUES.TOPIC.CONSUMER_GROUP_DEFAULT_VIEW.ALL;
+
+      this.getApi(
+        uriConsumerGroupByTopics(selectedCluster, encodeURIComponent(topicsName), groupsListView)
+      ).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 && roles.TOPIC_DATA && roles.TOPIC_DATA.includes('READ')) {

diff --git a/client/src/containers/Topic/TopicProduce/TopicProduce.jsx b/client/src/containers/Topic/TopicProduce/TopicProduce.jsx
@@ -9,7 +9,8 @@ import {
   uriTopics,
   uriTopicsPartitions,
   uriTopicsProduce,
-  uriAllSchema, uriTopicsName
+  uriAllSchema,
+  uriTopicsName
 } from '../../../utils/endpoints';
 import moment from 'moment';
 import DatePicker from '../../../components/DatePicker';
@@ -102,12 +103,12 @@ class TopicProduce extends Form {
     const { clusterId } = this.props.params;
 
     this.getApi(uriTopicsName(clusterId))
-    .then(res => {
-      this.setState({ topics: res.data });
-    })
-    .catch(err => {
-      console.error('Error:', err);
-    });
+      .then(res => {
+        this.setState({ topics: res.data });
+      })
+      .catch(err => {
+        console.error('Error:', err);
+      });
   }
 
   async getPreferredSchemaForTopic() {