Fix the issues in the Tabs React component (#335)

* Fix the issues in the `Tabs` React component

* Update the boolean expression as well

cli/cmd/tapRunner.go

@@ -632,7 +632,7 @@ func watchTapperPod(ctx context.Context, kubernetesProvider *kubernetes.Provider
 			}
 
 			if modifiedPod.Status.Phase == core.PodPending && modifiedPod.Status.Conditions[0].Type == core.PodScheduled && modifiedPod.Status.Conditions[0].Status != core.ConditionTrue {
-				logger.Log.Infof(uiUtils.Red, "Wasn't able to deploy the tapper %s. Reason: \"%s\"", modifiedPod.Name, modifiedPod.Status.Conditions[0].Message)
+				logger.Log.Infof(uiUtils.Red, fmt.Sprintf("Wasn't able to deploy the tapper %s. Reason: \"%s\"", modifiedPod.Name, modifiedPod.Status.Conditions[0].Message))
 				cancel()
 				break
 			}
@@ -649,7 +649,7 @@ func watchTapperPod(ctx context.Context, kubernetesProvider *kubernetes.Provider
 				if state.Terminated != nil {
 					switch state.Terminated.Reason {
 					case "OOMKilled":
-						logger.Log.Infof(uiUtils.Red, "Tapper %s was terminated (reason: OOMKilled). You should consider increasing machine resources.", modifiedPod.Name)
+						logger.Log.Infof(uiUtils.Red, fmt.Sprintf("Tapper %s was terminated (reason: OOMKilled). You should consider increasing machine resources.", modifiedPod.Name))
 					}
 				}
 			}

tap/extensions/kafka/helpers.go

@@ -130,8 +130,16 @@ func representMetadataResponse(data map[string]interface{}) []interface{} {
 	rep = representResponseHeader(data, rep)
 
 	payload := data["Payload"].(map[string]interface{})
-	topics, _ := json.Marshal(payload["Topics"].([]interface{}))
-	brokers, _ := json.Marshal(payload["Brokers"].([]interface{}))
+	topics := ""
+	if payload["Topics"] != nil {
+		_topics, _ := json.Marshal(payload["Topics"].([]interface{}))
+		topics = string(_topics)
+	}
+	brokers := ""
+	if payload["Brokers"] != nil {
+		_brokers, _ := json.Marshal(payload["Brokers"].([]interface{}))
+		brokers = string(_brokers)
+	}
 	controllerID := ""
 	clusterID := ""
 	throttleTimeMs := ""
@@ -155,7 +163,7 @@ func representMetadataResponse(data map[string]interface{}) []interface{} {
 		},
 		{
 			"name":  "Brokers",
-			"value": string(brokers),
+			"value": brokers,
 		},
 		{
 			"name":  "Cluster ID",
@@ -167,7 +175,7 @@ func representMetadataResponse(data map[string]interface{}) []interface{} {
 		},
 		{
 			"name":  "Topics",
-			"value": string(topics),
+			"value": topics,
 		},
 		{
 			"name":  "Cluster Authorized Operations",
@@ -303,7 +311,11 @@ func representProduceResponse(data map[string]interface{}) []interface{} {
 	rep = representResponseHeader(data, rep)
 
 	payload := data["Payload"].(map[string]interface{})
-	responses, _ := json.Marshal(payload["Responses"].([]interface{}))
+	responses := ""
+	if payload["Responses"] != nil {
+		_responses, _ := json.Marshal(payload["Responses"].([]interface{}))
+		responses = string(_responses)
+	}
 	throttleTimeMs := ""
 	if payload["ThrottleTimeMs"] != nil {
 		throttleTimeMs = fmt.Sprintf("%d", int(payload["ThrottleTimeMs"].(float64)))
@@ -333,7 +345,11 @@ func representFetchRequest(data map[string]interface{}) []interface{} {
 	rep = representRequestHeader(data, rep)
 
 	payload := data["Payload"].(map[string]interface{})
-	topics, _ := json.Marshal(payload["Topics"].([]interface{}))
+	topics := ""
+	if payload["Topics"] != nil {
+		_topics, _ := json.Marshal(payload["Topics"].([]interface{}))
+		topics = string(_topics)
+	}
 	replicaId := ""
 	if payload["ReplicaId"] != nil {
 		replicaId = fmt.Sprintf("%d", int(payload["ReplicaId"].(float64)))
@@ -361,7 +377,7 @@ func representFetchRequest(data map[string]interface{}) []interface{} {
 	}
 	rackId := ""
 	if payload["RackId"] != nil {
-		rackId = fmt.Sprintf("%d", int(payload["RackId"].(float64)))
+		rackId = payload["RackId"].(string)
 	}
 	repPayload, _ := json.Marshal([]map[string]string{
 		{
@@ -394,7 +410,7 @@ func representFetchRequest(data map[string]interface{}) []interface{} {
 		},
 		{
 			"name":  "Topics",
-			"value": string(topics),
+			"value": topics,
 		},
 		{
 			"name":  "Forgotten Topics Data",
@@ -420,7 +436,11 @@ func representFetchResponse(data map[string]interface{}) []interface{} {
 	rep = representResponseHeader(data, rep)
 
 	payload := data["Payload"].(map[string]interface{})
-	responses, _ := json.Marshal(payload["Responses"].([]interface{}))
+	responses := ""
+	if payload["Responses"] != nil {
+		_responses, _ := json.Marshal(payload["Responses"].([]interface{}))
+		responses = string(_responses)
+	}
 	throttleTimeMs := ""
 	if payload["ThrottleTimeMs"] != nil {
 		throttleTimeMs = fmt.Sprintf("%d", int(payload["ThrottleTimeMs"].(float64)))
@@ -448,7 +468,7 @@ func representFetchResponse(data map[string]interface{}) []interface{} {
 		},
 		{
 			"name":  "Responses",
-			"value": string(responses),
+			"value": responses,
 		},
 	})
 	rep = append(rep, map[string]string{
@@ -466,7 +486,11 @@ func representListOffsetsRequest(data map[string]interface{}) []interface{} {
 	rep = representRequestHeader(data, rep)
 
 	payload := data["Payload"].(map[string]interface{})
-	topics, _ := json.Marshal(payload["Topics"].([]interface{}))
+	topics := ""
+	if payload["Topics"] != nil {
+		_topics, _ := json.Marshal(payload["Topics"].([]interface{}))
+		topics = string(_topics)
+	}
 	repPayload, _ := json.Marshal([]map[string]string{
 		{
 			"name":  "Replica ID",
@@ -474,7 +498,7 @@ func representListOffsetsRequest(data map[string]interface{}) []interface{} {
 		},
 		{
 			"name":  "Topics",
-			"value": string(topics),
+			"value": topics,
 		},
 	})
 	rep = append(rep, map[string]string{

tap/extensions/kafka/main.go

@@ -104,7 +104,11 @@ func (d dissecting) Analyze(item *api.OutputChannelItem, entryId string, resolve
 		}
 		break
 	case Fetch:
-		topics := reqDetails["Payload"].(map[string]interface{})["Topics"].([]interface{})
+		_topics := reqDetails["Payload"].(map[string]interface{})["Topics"]
+		if _topics == nil {
+			break
+		}
+		topics := _topics.([]interface{})
 		for _, topic := range topics {
 			summary += fmt.Sprintf("%s, ", topic.(map[string]interface{})["Topic"].(string))
 		}
@@ -113,7 +117,11 @@ func (d dissecting) Analyze(item *api.OutputChannelItem, entryId string, resolve
 		}
 		break
 	case ListOffsets:
-		topics := reqDetails["Payload"].(map[string]interface{})["Topics"].([]interface{})
+		_topics := reqDetails["Payload"].(map[string]interface{})["Topics"]
+		if _topics == nil {
+			break
+		}
+		topics := _topics.([]interface{})
 		for _, topic := range topics {
 			summary += fmt.Sprintf("%s, ", topic.(map[string]interface{})["Name"].(string))
 		}

ui/src/components/EntryDetailed/EntryViewer.tsx

@@ -36,14 +36,8 @@ const SectionsRepresentation: React.FC<any> = ({data, color}) => {
 const AutoRepresentation: React.FC<any> = ({representation, isRulesEnabled, rulesMatched, elapsedTime, color}) => {
     var TABS = [
         {
-            tab: 'request'
-        },
-        {
-            tab: 'response',
-        },
-        {
-            tab: 'Rules',
-        },
+            tab: 'Request'
+        }
     ];
     const [currentTab, setCurrentTab] = useState(TABS[0].tab);
 
@@ -54,12 +48,25 @@ const AutoRepresentation: React.FC<any> = ({representation, isRulesEnabled, rule
 
     const {request, response} = JSON.parse(representation);
 
-    if (!response) {
-        TABS[1]['hidden'] = true;
+    var responseTabIndex = 0;
+    var rulesTabIndex = 0;
+
+    if (response) {
+        TABS.push(
+            {
+                tab: 'Response',
+            }
+        );
+        responseTabIndex = TABS.length - 1;
     }
 
-    if (!isRulesEnabled) {
-        TABS.pop()
+    if (isRulesEnabled) {
+        TABS.push(
+            {
+                tab: 'Rules',
+            }
+        );
+        rulesTabIndex = TABS.length - 1;
     }
 
     return <div className={styles.Entry}>
@@ -71,10 +78,10 @@ const AutoRepresentation: React.FC<any> = ({representation, isRulesEnabled, rule
             {currentTab === TABS[0].tab && <React.Fragment>
                 <SectionsRepresentation data={request} color={color}/>
             </React.Fragment>}
-            {response && currentTab === TABS[1].tab && <React.Fragment>
+            {response && currentTab === TABS[responseTabIndex].tab && <React.Fragment>
                 <SectionsRepresentation data={response} color={color}/>
             </React.Fragment>}
-            {TABS.length > 2 && currentTab === TABS[2].tab && <React.Fragment>
+            {isRulesEnabled && currentTab === TABS[rulesTabIndex].tab && <React.Fragment>
                 <EntryTablePolicySection title={'Rule'} color={color} latency={elapsedTime} arrayToIterate={rulesMatched ? rulesMatched : []}/>
             </React.Fragment>}
         </div>}

ui/src/components/UI/Tabs.tsx

@@ -5,7 +5,6 @@ import variables from '../../variables.module.scss';
 
 interface Tab {
     tab: string,
-    hidden?: boolean,
     disabled?: boolean,
     disabledMessage?: string,
     highlight?: boolean,
@@ -66,7 +65,8 @@ const useTabsStyles = makeStyles((theme) => ({
         borderRight: "1px solid " + theme.palette.primary.dark,
         height: 20,
         verticalAlign: 'middle',
-        margin: '0 20px'
+        margin: '0 20px',
+        cursor: 'unset',
     }
 
 }));
@@ -75,7 +75,7 @@ const useTabsStyles = makeStyles((theme) => ({
 const Tabs: React.FC<Props> = ({classes={}, tabs, currentTab, color, onChange, leftAligned, dark}) => {
     const _classes = {...useTabsStyles(), ...classes};
     return <div className={`${_classes.root} ${leftAligned ? _classes.tabsAlignLeft : ''}`}>
-        {tabs.filter((tab) => !tab.hidden).map(({tab, disabled, disabledMessage, highlight, badge}, index) => {
+        {tabs.map(({tab, disabled, disabledMessage, highlight, badge}, index) => {
             const active = currentTab === tab;
             const tabLink = <span
                 key={tab}