Merge pull request #83 from nahuelarjonadev/master

performance improvement on reclicking topics, improved ux in TopicPage

client/src/app/components/ConnectionPage.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import '../css/ConnectionPage.scss';
 import lensIcon from '../../../../assets/images/lens-icon.png';
 import nullableProp from '../../utils/nullableProp';
+import { version } from '../../../../package.json';
 
 const ConnectionPage = ({
   isFetching,
@@ -53,7 +54,7 @@ const ConnectionPage = ({
       {/* Loading bars here */}
       <div className="loading-bars">{loading}</div>
       <footer className="footer">
-        <p className="FooterText">© Kafka Lens Version 2.0 </p>
+        <p className="FooterText">© Kafka Lens Version {version} </p>
       </footer>
     </div>
   );

client/src/app/components/Topic.jsx

@@ -16,7 +16,7 @@ const Topic = ({ id, topicInfo, showPartitions, showMessages }) => (
     >
       {topicInfo.topicName}
     </div>
-    {topicInfo.showPartitions === true ? (
+    {topicInfo.showPartitions ? (
       <PartitionList showMessages={showMessages} topicInfo={topicInfo} />
     ) : (
       ''

client/src/app/containers/TopicPage.jsx

@@ -47,13 +47,23 @@ class TopicPage extends React.Component {
 
   // Called when topic is clicked in order to show partitions
   showPartitions(event) {
+    const element = event.target;
+    const { lastElement } = this.state;
     const { topicList } = this.props;
-    const topicName = event.target.getAttribute('topicname');
-    const topicIndex = parseInt(event.target.id, 10);
+    const topicName = element.getAttribute('topicname');
+    const topicIndex = element.id;
     const topicInfo = topicList[topicIndex];
-
     topicInfo.showPartitions = !topicInfo.showPartitions;
 
+    if (lastElement === element) {
+      logger.log('clicked same element');
+      this.setState({ currentPartitionMetadata: topicInfo });
+      return;
+    }
+
+    if (lastElement) lastElement.classList.remove('highlight-this');
+    element.classList.add('highlight-this');
+
     const { uri: kafkaHostURI } = this.props;
     ipcRenderer.send('partition:getMessages', {
       kafkaHostURI,
@@ -62,33 +72,30 @@ class TopicPage extends React.Component {
 
     const newState = this.state;
 
-    const { showingPartitionMetadata } = this.state;
-    if (showingPartitionMetadata === true) newState.showingPartitionMetadata = false;
-
+    newState.showingPartitionMetadata = false;
     newState.currentTopicMetadata = topicInfo;
     newState.loadingData = true;
+    newState.lastElement = element;
 
-    return this.setState(newState);
+    this.setState(newState);
   }
 
   showMessages(event) {
     const element = event.target;
     const newTopicName = element.getAttribute('topicname');
     const newPartitionId = element.id;
+    const { lastElement } = this.state;
 
     logger.log('newTopicName from the partition div:', newTopicName);
     logger.log('newPartitionId:', newPartitionId);
 
-    const { lastElement, partitionId, topicName } = this.state;
-    const { uri: kafkaHostURI } = this.props;
-
-    if (newPartitionId === partitionId && newTopicName === topicName && lastElement === element)
-      return;
+    if (lastElement === element) return;
 
     if (lastElement) lastElement.classList.remove('highlight-this');
-
     element.classList.add('highlight-this');
 
+    const { uri: kafkaHostURI } = this.props;
+
     this.setState(
       {
         messages: [],
@@ -126,11 +133,11 @@ class TopicPage extends React.Component {
     } = this.state;
 
     const shouldDisplayPartitionMetadata =
-      showingPartitionMetadata === true &&
+      showingPartitionMetadata &&
       Object.keys(currentPartitionMetadata).length &&
       messages.length > 0;
 
-    const shouldDisplayMessageInfo = showingPartitionMetadata === true && messages.length > 0;
+    const shouldDisplayMessageInfo = showingPartitionMetadata && messages.length > 0;
 
     const Topics = topicList.map((topicInfo, i) => (
       <Topic

client/src/app/css/Partition.scss

@@ -10,13 +10,7 @@
     font-size: 16px;
 }
 
-.single-partition:hover {
+.single-partition:hover, .single-partition:focus {
     background-color: $highlight-bar-color;
-    color: white;
     cursor: pointer;
 }
-
-.single-partition:focus {
-    background-color: black;
-}
-

client/src/app/css/Topic.scss

@@ -7,4 +7,9 @@
 
 .topic-padding {
     padding-left: 56px;
+}
+
+.topic-padding:hover, .topic-padding:focus {
+    background-color: $highlight-bar-color;
+    cursor: pointer;
 }

client/src/app/css/TopicPage.scss

@@ -88,6 +88,10 @@
   color: $base-font-color;
 }
 
+.highlight-this {
+  color: yellow;
+}
+
 // DO NOT REMOVE (scroll bar style)
 // ::-webkit-scrollbar {     
 //   background-color: $new-bg-blue;

package.json

@@ -42,12 +42,14 @@
       "icon": "icon.png"
     },
     "win": {
+      "icon": "icon.ico",
       "target": [
         "nsis",
         "msi"
       ]
     },
     "linux": {
+      "icon": "icon.png",
       "target": [
         "deb",
         "rpm",