Display Redis value as EntryBodySection (#644)

tap/extensions/redis/helpers.go

@@ -42,11 +42,6 @@ func representGeneric(generic map[string]interface{}, selectorPrefix string) (re
 			Value:    generic["key"].(string),
 			Selector: fmt.Sprintf("%skey", selectorPrefix),
 		},
-		{
-			Name:     "Value",
-			Value:    generic["value"].(string),
-			Selector: fmt.Sprintf("%svalue", selectorPrefix),
-		},
 		{
 			Name:     "Keyword",
 			Value:    generic["keyword"].(string),
@@ -59,5 +54,12 @@ func representGeneric(generic map[string]interface{}, selectorPrefix string) (re
 		Data:  string(details),
 	})
 
+	representation = append(representation, api.SectionData{
+		Type:     api.BODY,
+		Title:    "Value",
+		Data:     generic["value"].(string),
+		Selector: fmt.Sprintf("%svalue", selectorPrefix),
+	})
+
 	return
 }

ui/src/components/EntryDetailed/EntrySections.tsx

@@ -107,6 +107,7 @@ export const EntrySectionContainer: React.FC<EntrySectionContainerProps> = ({tit
 }
 
 interface EntryBodySectionProps {
+    title: string,
     content: any,
     color: string,
     updateQuery: any,
@@ -116,6 +117,7 @@ interface EntryBodySectionProps {
 }
 
 export const EntryBodySection: React.FC<EntryBodySectionProps> = ({
+    title,
     color,
     updateQuery,
     content,
@@ -167,7 +169,7 @@ export const EntryBodySection: React.FC<EntryBodySectionProps> = ({
 
     return <React.Fragment>
         {content && content?.length > 0 && <EntrySectionContainer
-                                                title='Body'
+                                                title={title}
                                                 color={color}
                                                 query={`${selector} == r".*"`}
                                                 updateQuery={updateQuery}
@@ -205,13 +207,27 @@ interface EntrySectionProps {
 }
 
 export const EntryTableSection: React.FC<EntrySectionProps> = ({title, color, arrayToIterate, updateQuery}) => {
+    let arrayToIterateSorted: any[];
+    if (arrayToIterate) {
+        arrayToIterateSorted = arrayToIterate.sort((a, b) => {
+            if (a.name > b.name) {
+                return 1;
+            }
+
+            if (a.name < b.name) {
+                return -1;
+            }
+
+            return 0;
+        });
+    }
     return <React.Fragment>
         {
             arrayToIterate && arrayToIterate.length > 0 ?
                 <EntrySectionContainer title={title} color={color}>
                     <table>
                         <tbody>
-                            {arrayToIterate.map(({name, value, selector}, index) => <EntryViewLine
+                            {arrayToIterateSorted.map(({name, value, selector}, index) => <EntryViewLine
                                 key={index}
                                 label={name}
                                 value={value}

ui/src/components/EntryDetailed/EntryViewer.tsx

@@ -21,7 +21,7 @@ const SectionsRepresentation: React.FC<any> = ({data, color, updateQuery}) => {
                     break;
                 case SectionTypes.SectionBody:
                     sections.push(
-                        <EntryBodySection key={i} color={color} content={row.data} updateQuery={updateQuery} encoding={row.encoding} contentType={row.mimeType} selector={row.selector}/>
+                        <EntryBodySection key={i} title={row.title} color={color} content={row.data} updateQuery={updateQuery} encoding={row.encoding} contentType={row.mimeType} selector={row.selector}/>
                     )
                     break;
                 default: