correctly handle complex data in message headers; fixes #143

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Master / unreleased
 
+## 1.2.1 / 2020-11-16
+- [ENHANCEMENT] Message headers can be expanded/collapsed now
+- [BUGFIX] Kowl now handles message headers containing structured data (JSON) correctly
+
 ## 1.2.0 / 2020-11-14
 
 - **[FEATURE] Embed topic documentation using Markdown files from Git repositories ([/docs/features/topic-documentation.md](/docs/features/topic-documentation.md))**

docs/local/docker-compose.yaml

@@ -33,7 +33,7 @@ services:
       - zoo1
 
   kowl:
-    image: quay.io/cloudhut/kowl:v1.2.0
+    image: quay.io/cloudhut/kowl:v1.2.1
     restart: on-failure
     hostname: kowl
     volumes:

frontend/src/components/pages/topics/Tab.Messages/index.tsx

@@ -780,7 +780,7 @@ class MessagePreview extends Component<{ msg: TopicMessage, previewFields: () =>
 
 function RenderExpandedMessage(msg: TopicMessage, shouldExpand?: ((x: CollapsedFieldProps) => boolean)) {
     return <div>
-        {(msg.headers.length > 0) && RenderMessageHeaders(msg)}
+        {(msg.headers.length > 0) && <MessageHeaders msg={msg} />}
         <div>{RenderMessageValue(msg, shouldExpand)}</div>
     </div>
 }
@@ -836,14 +836,24 @@ function RenderMessageValue(msg: TopicMessage, shouldExpand?: ((x: CollapsedFiel
     }
 }
 
-function RenderMessageHeaders(msg: TopicMessage) {
+const MessageHeaders = observer((props: { msg: TopicMessage }) => {
+    const headers = props.msg.headers
+    const jsonHeaders = headers.map(h => ({
+        key: ToJson(h.key),
+        value: ToJson(h.value),
+        valueEncoding: ToJson(h.valueEncoding)
+    }));
+    const showHeaders = uiState.topicSettings.showMessageHeaders;
+    const titleText = (showHeaders ? "Hide" : "Show") + " Message Headers";
     return <div className='messageHeaders'>
-        <div className='title'>Message Headers</div>
-        {QuickTable(msg.headers, {
+        <div className='title'>
+            <span className='titleBtn' onClick={() => uiState.topicSettings.showMessageHeaders = !showHeaders}>{titleText}</span>
+        </div>
+        {showHeaders && QuickTable(jsonHeaders, {
             tableStyle: { width: 'auto', paddingLeft: '1em' },
         })}
     </div>
-}
+});
 
 @observer
 class PreviewSettings extends Component<{ allCurrentKeys: string[], getShowDialog: () => boolean, setShowDialog: (show: boolean) => void }> {

frontend/src/index.scss

@@ -1301,19 +1301,40 @@ svg {
 }
 
 .messageHeaders {
-    margin-bottom: 2em;
+    margin-bottom: 1.5em;
     margin-top: .5em;
-    padding-bottom: 1em;
+    padding-bottom: .5em;
     border-bottom: 1px solid #ddd;
 
     .title {
-        padding-bottom: 8px;
+        padding-bottom: 6px;
         font-family: "Open Sans", sans-serif;
         font-size: 11px;
         font-weight: 600;
         // padding-left: 2px;
         color: hsla(0, 0%, 50%, 1);
-        cursor: default;
+
+        .titleBtn {
+            border: 1px solid transparent;
+            padding: 3px 6px;
+            border-radius: 3px;
+
+            cursor: pointer;
+            user-select: none;
+
+            transition: background-color 80ms ease-out, border-color 80ms ease-out, color 80ms ease-out;
+
+            &:hover {
+                color: hsl(205, 100%, 50%);
+                background-color: hsla(0, 0%, 100%, 0.85);
+                border-color: hsla(205, 100%, 50%, 1);
+            }
+        }
+    }
+
+    .quickTable {
+        margin-bottom: .5rem;
+        margin-top: .5rem;
     }
 
     .keyCell {

frontend/src/state/backendApi.ts

@@ -3,11 +3,11 @@
 import {
     GetTopicsResponse, TopicDetail, GetConsumerGroupsResponse, GroupDescription, UserData,
     TopicConfigEntry, ClusterInfo, TopicMessage, TopicConfigResponse,
-    ClusterInfoResponse, GetPartitionsResponse, Partition, GetTopicConsumersResponse, TopicConsumer, AdminInfo, TopicPermissions, ClusterConfigResponse, ClusterConfig, TopicDocumentationResponse,  AclRequest, AclResponse, AclResource, SchemaOverview, SchemaOverviewRequestError, SchemaOverviewResponse, SchemaDetailsResponse, SchemaDetails
+    ClusterInfoResponse, GetPartitionsResponse, Partition, GetTopicConsumersResponse, TopicConsumer, AdminInfo, TopicPermissions, ClusterConfigResponse, ClusterConfig, TopicDocumentationResponse, AclRequest, AclResponse, AclResource, SchemaOverview, SchemaOverviewRequestError, SchemaOverviewResponse, SchemaDetailsResponse, SchemaDetails
 } from "./restInterfaces";
 import { observable, autorun, computed, action, transaction, decorate, extendObservable } from "mobx";
 import fetchWithTimeout from "../utils/fetchWithTimeout";
-import { ToJson, LazyMap, TimeSince } from "../utils/utils";
+import { ToJson, LazyMap, TimeSince, clone } from "../utils/utils";
 import { IsDev, IsBusiness, basePathS } from "../utils/env";
 import { appGlobal } from "./appGlobal";
 import { uiState } from "./uiState";

frontend/src/state/restInterfaces.ts

@@ -55,8 +55,8 @@ export interface TopicMessage {
     key: any, // base64 encoded key of the message
 
     headers: {
-        key: string,
-        value: string,
+        key: string | object,
+        value: string | object,
         valueEncoding: MessageDataType // for now: always text
     }[]
 

frontend/src/state/ui.ts

@@ -7,9 +7,9 @@ const settingsName = 'uiSettings-v3';
 
 
 /*
-	todo:
-	- remember UI settings using local storage
-	- topic: message filter, display settings, ...
+    todo:
+    - remember UI settings using local storage
+    - topic: message filter, display settings, ...
 */
 
 export interface PreviewTag {
@@ -81,6 +81,7 @@ export class TopicDetailsSettings {
     @observable previewShowResultCount = false;
     // @observable previewResultLimit: 3; // todo
     @observable previewShowEmptyMessages = true; // todo: filter out messages that don't match
+    @observable showMessageHeaders = false;
 
     @observable previewTimestamps = 'default' as TimestampDisplayFormat;
     @observable previewColumnFields = [] as ColumnList[];