Packager: Print Debug Fields on Separate Lines

Summary:
When printing fields in the packager server debug output, this revision breaks the fields up onto multiple lines.

As it currently exists, the fields are printed immediately after the log entry label which can seem unnecessarily repetitive and unintuitive.

Reviewed By: davidaurelio

Differential Revision: D4235038

fbshipit-source-id: 2d59afa70c74f19afab221dfa58f437913c6dc2c

react-packager/src/Logger/index.js

@@ -89,38 +89,38 @@ function print(
   if (!PRINT_LOG_ENTRIES) {
     return logEntry;
   }
+  const {
+    log_entry_label: logEntryLabel,
+    action_phase: actionPhase,
+    duration_ms: duration,
+  } = logEntry;
 
-  const {log_entry_label, action_phase, duration_ms} = logEntry;
   const timeStamp = new Date().toLocaleString();
-  const logEntryDataList = [];
-  let logEntryString, logEntryDataString;
+  let logEntryString;
 
-  for (let i = 0, len = printFields.length; i < len; i++) {
-    const field = printFields[i];
+  switch (actionPhase) {
+    case 'start':
+      logEntryString = chalk.dim(`[${timeStamp}] <START> ${logEntryLabel}`);
+      break;
+    case 'end':
+      logEntryString = chalk.dim(`[${timeStamp}] <END>   ${logEntryLabel}`) +
+        chalk.cyan(` (${+duration}ms)`);
+      break;
+    default:
+      logEntryString = chalk.dim(`[${timeStamp}]         ${logEntryLabel}`);
+      break;
+  }
+
+  if (printFields.length) {
+    const indent = ' '.repeat(timeStamp.length + 11);
+
+    for (const field of printFields) {
       const value = logEntry[field];
       if (value === undefined) {
         continue;
       }
-    logEntryDataList.push(`${field}: ${value.toString()}`);
+      logEntryString += chalk.dim(`\n${indent}${field}: ${value.toString()}`);
     }
-
-  logEntryDataString = logEntryDataList.join(' | ');
-
-  if (logEntryDataString) {
-    logEntryDataString = ` ${logEntryDataString}`;
-  }
-
-  switch (action_phase) {
-    case 'start':
-      logEntryString = chalk.dim(`[${timeStamp}] <START> ${log_entry_label}${logEntryDataString}`);
-      break;
-    case 'end':
-      logEntryString = chalk.dim(`[${timeStamp}] <END>   ${log_entry_label}${logEntryDataString}`) +
-        chalk.cyan(` (${+duration_ms}ms)`);
-      break;
-    default:
-      logEntryString = chalk.dim(`[${timeStamp}]         ${log_entry_label}${logEntryDataString}`);
-      break;
   }
 
   // eslint-disable-next-line no-console-disallow