Fix the interface conversion errors in Redis (#334)

* Fix the issues in the `Tabs` React component

* Update the boolean expression as well

tap/extensions/redis/read.go

@@ -296,12 +296,28 @@ func (p *RedisProtocol) Read() (packet *RedisPacket, err error) {
 	switch x.(type) {
 	case []interface{}:
 		array := x.([]interface{})
-		packet.Command = RedisCommand(strings.ToUpper(string(array[0].([]uint8))))
-		if len(array) > 1 {
-			packet.Key = string(array[1].([]uint8))
-		}
-		if len(array) > 2 {
-			packet.Value = string(array[2].([]uint8))
+		switch array[0].(type) {
+		case []uint8:
+			packet.Command = RedisCommand(strings.ToUpper(string(array[0].([]uint8))))
+			if len(array) > 1 {
+				packet.Key = string(array[1].([]uint8))
+			}
+			if len(array) > 2 {
+				packet.Value = string(array[2].([]uint8))
+			}
+			if len(array) > 3 {
+				packet.Value = fmt.Sprintf("[%s", packet.Value)
+				for _, item := range array[3:] {
+					packet.Value = fmt.Sprintf("%s, %s", packet.Value, item.([]uint8))
+				}
+				packet.Value = strings.TrimSuffix(packet.Value, ", ")
+				packet.Value = fmt.Sprintf("%s]", packet.Value)
+			}
+		default:
+			msg := fmt.Sprintf("Unrecognized element in Redis array: %v\n", reflect.TypeOf(array[0]))
+			log.Printf(msg)
+			err = errors.New(msg)
+			return
 		}
 	case []uint8:
 		val := string(x.([]uint8))
@@ -316,6 +332,8 @@ func (p *RedisProtocol) Read() (packet *RedisPacket, err error) {
 		}
 	case string:
 		packet.Value = x.(string)
+	case int64:
+		packet.Value = fmt.Sprintf("%d", x.(int64))
 	default:
 		msg := fmt.Sprintf("Unrecognized Redis data type: %v\n", reflect.TypeOf(x))
 		log.Printf(msg)

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}