Added gRPC parsing support for display in the UI

Author: bluemods

src/model/events/body-formatting.ts

@@ -142,6 +142,12 @@ export const Formatters: { [key in ViewableContentType]: Formatter } = {
         isEditApplicable: false,
         render: buildAsyncRenderer('protobuf')
     },
+    grpc: {
+        language: 'grpc',
+        cacheKey: Symbol('grpc'),
+        isEditApplicable: false,
+        render: buildAsyncRenderer('grpc')
+    },
     'url-encoded': {
         layout: 'scrollable',
         Component: styled(ReadOnlyParams).attrs((p: FormatComponentProps) => ({

src/model/events/content-types.ts

@@ -33,7 +33,8 @@ export type ViewableContentType =
     | 'markdown'
     | 'yaml'
     | 'image'
-    | 'protobuf';
+    | 'protobuf'
+    | 'grpc';
 
 export const EditableContentTypes = [
     'text',
@@ -94,9 +95,10 @@ const mimeTypeToContentTypeMap: { [mimeType: string]: ViewableContentType } = {
     'application/vnd.google.protobuf': 'protobuf',
     'application/x-google-protobuf': 'protobuf',
     'application/proto': 'protobuf', // N.b. this covers all application/XXX+proto values
-    'application/grpc': 'protobuf', // Used in GRPC requests
     'application/x-protobuffer': 'protobuf', // Commonly seen in Google apps
 
+    'application/grpc': 'grpc', // Used in GRPC requests (protobuf with special headers)
+
     'application/octet-stream': 'raw'
 } as const;
 
@@ -122,6 +124,7 @@ export function getContentEditorName(contentType: ViewableContentType): string {
         : contentType === 'json' ? 'JSON'
         : contentType === 'css' ? 'CSS'
         : contentType === 'url-encoded' ? 'URL-Encoded'
+        : contentType === 'grpc' ? 'gRPC'
         : _.capitalize(contentType);
 }
 
@@ -163,10 +166,14 @@ export function getCompatibleTypes(
         types.add('xml');
     }
 
+    if (!types.has('grpc') && rawContentType && rawContentType.startsWith('application/grpc')) {
+        types.add('grpc')
+    }
     if (
         body &&
         isProbablyProtobuf(body) &&
         !types.has('protobuf') &&
+        !types.has('grpc') &&
         // If it's probably unmarked protobuf, and it's a manageable size, try
         // parsing it just to check:
         (body.length < 100_000 && isValidProtobuf(body))

src/services/ui-worker-formatters.ts

@@ -6,7 +6,7 @@ import {
 import * as beautifyXml from 'xml-beautifier';
 
 import { bufferToHex, bufferToString, getReadableSize } from '../util/buffer';
-import { parseRawProtobuf } from '../util/protobuf';
+import { parseRawProtobuf, parseGrpcProtobuf } from '../util/protobuf';
 
 const truncationMarker = (size: string) => `\n[-- Truncated to ${size} --]`;
 const FIVE_MB = 1024 * 1024 * 5;
@@ -78,6 +78,24 @@ const WorkerFormatters = {
             prefix: ''
         });
 
+        return JSON.stringify(data, (_key, value) => {
+            // Buffers have toJSON defined, so arrive here in JSONified form:
+            if (value.type === 'Buffer' && Array.isArray(value.data)) {
+                const buffer = Buffer.from(value.data);
+
+                return {
+                    "Type": `Buffer (${getReadableSize(buffer)})`,
+                    "As string": bufferToString(buffer, 'detect-encoding'),
+                    "As hex": bufferToHex(buffer)
+                }
+            } else {
+                return value;
+            }
+        }, 2);
+    },
+    grpc: (content: Buffer) => {
+        const data = parseGrpcProtobuf(content);
+
         return JSON.stringify(data, (_key, value) => {
             // Buffers have toJSON defined, so arrive here in JSONified form:
             if (value.type === 'Buffer' && Array.isArray(value.data)) {

src/util/protobuf.ts

@@ -28,6 +28,25 @@ export function isProbablyProtobuf(input: Uint8Array) {
 
 export const parseRawProtobuf = parseRawProto;
 
+// The repeated sequence of Length-Prefixed-Message items is delivered in DATA frames
+
+// Length-Prefixed-Message → Compressed-Flag Message-Length Message
+// Compressed-Flag → 0 / 1 ; encoded as 1 byte unsigned integer
+// Message-Length → {length of Message} ; encoded as 4 byte unsigned integer (big endian)
+// Message → *{binary octet}
+export const parseGrpcProtobuf = (input: Buffer) => {
+    if (input.readInt8() != 0) {
+        // TODO support compressed gRPC messages?
+        throw new Error("compressed gRPC messages not yet supported")
+    }
+    const length = input.readInt32BE(1);
+    input = input.slice(5, 5+length);
+
+    return parseRawProtobuf(input, {
+        prefix: ''
+    });
+}
+
 export const isValidProtobuf = (input: Uint8Array) => {
     try {
         parseRawProtobuf(input);