Toggle fields, metadata display inside info display (#671)

* Include `fields` and `metadata` in the graphql query

* Pass through toggleDisplay props

* Transform fields, metadata array into objects for display

* Format fix

Author: niwsa

src/components/containers/EventsBrowser.tsx

@@ -27,7 +27,7 @@ import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 dayjs.extend(relativeTime);
 
-type EventBrowserProps = {
+export type EventBrowserProps = {
   auditLogToken: string;
   mount?: boolean;
   headerTitle?: string;
@@ -48,6 +48,10 @@ type EventBrowserProps = {
   theme?: string;
   dataLoading?: any;
   refreshToken?: () => void;
+  toggleDisplay?: {
+    fields?: boolean;
+    metadata?: boolean;
+  };
 };
 
 interface EventBrowserState {
@@ -619,9 +623,9 @@ export default connect(
     dataLoading: state.ui.loadingData,
     tableHeaderItems: state.ui.eventsUiData.eventTableHeaderItems,
   }),
-  (dispatch: any) => ({
+  (dispatch: any, ownProps: EventBrowserProps) => ({
     requestEventSearch(query, handleRefreshToken) {
-      return dispatch(requestEventSearch(query, handleRefreshToken));
+      return dispatch(requestEventSearch(query, handleRefreshToken, ownProps.toggleDisplay));
     },
     createSession(token, host) {
       return dispatch(createSession(token, host));

src/dev/LogsViewerWrapper.tsx

@@ -75,6 +75,7 @@ const LogsViewerWrapper = (props) => {
       disableShowRawEvent={props.disableShowRawEvent ? props.disableShowRawEvent : false}
       skipViewLogEvent={true}
       refreshToken={fetchToken}
+      toggleDisplay={{ fields: true, metadata: true }}
     />
   );
 };

src/index.tsx

@@ -25,6 +25,10 @@ type RetracedEventsBrowserProps = {
   fields?: EventField[];
   skipViewLogEvent?: boolean;
   refreshToken?: () => void;
+  toggleDisplay?: {
+    fields?: boolean;
+    metadata?: boolean;
+  };
 };
 
 const store = configStore();
@@ -48,6 +52,7 @@ export default class RetracedEventsBrowser extends React.Component<RetracedEvent
             disableShowRawEvent={this.props.disableShowRawEvent}
             skipViewLogEvent={this.props.skipViewLogEvent}
             refreshToken={this.props.refreshToken}
+            toggleDisplay={this.props.toggleDisplay}
           />
         </Provider>
       </div>

src/redux/data/events/thunks.js

@@ -2,7 +2,11 @@ import _ from "lodash";
 import { receiveEventList } from "./actions";
 import { loadingData } from "../../ui/actions";
 
-export function requestEventSearch(query, refreshToken) {
+function getObjFromKeyValArray(arr) {
+  return arr?.reduce((acc, cur) => ({ ...acc, [cur.key]: cur.value }), {});
+}
+
+export function requestEventSearch(query, refreshToken, toggleDisplay) {
   return async (dispatch, getState) => {
     dispatch(loadingData("eventFetch", true));
     let data;
@@ -54,6 +58,22 @@ export function requestEventSearch(query, refreshToken) {
                     display {
                       markdown
                     }
+                    ${
+                      toggleDisplay?.fields
+                        ? `fields{
+                      key
+                      value
+                    }`
+                        : ""
+                    }
+                    ${
+                      toggleDisplay?.metadata
+                        ? `metadata{
+                      key
+                      value
+                    }`
+                        : ""
+                    }
                     is_failure
                     is_anonymous
                     source_ip
@@ -84,7 +104,11 @@ export function requestEventSearch(query, refreshToken) {
       return null;
     }
     if (data?.data?.search?.edges && Array.isArray(data.data.search.edges)) {
-      const events = data.data.search.edges.map(({ node }) => node);
+      const events = data.data.search.edges.map(({ node }) => ({
+        ...node,
+        fields: getObjFromKeyValArray(node.fields),
+        metadata: getObjFromKeyValArray(node.metadata),
+      }));
       const cursor = data.data.search.pageInfo.hasPreviousPage && _.last(data.data.search.edges).cursor;
       dispatch(receiveEventList(query, data.data.search.totalCount, events, cursor));
       dispatch(loadingData("eventFetch", false));