Fix metadata field rendering and log off-by-one error

src/datasource/components/Logs/LogsCell.tsx

@@ -26,7 +26,7 @@ const LogKeyVal = ({ field, val }: LogKeyValProps) => {
 
         </div>
         <div style={{display: 'inline-block'}}>
-            {val}
+            {JSON.stringify(val)}
         </div>
     </div>);
 }
@@ -45,7 +45,7 @@ const ExpandedLogKeyVal = ({ field, val }: ExpandedLogKeyValProps) => {
 
         </td>
         <td>
-            {val}
+            {JSON.stringify(val)}
         </td>
     </tr>);
 }
@@ -60,6 +60,10 @@ interface ExpandedDocumentProps {
 
 
 const ExpandedDocument  = ({ log, index, datasourceUid, datasourceName, datasourceField }: ExpandedDocumentProps) => {
+    // The index in the logs is off by one from the index in the table (due to the header row). In this
+    // case we care about the index in the table, so add one to it.
+    index += 1;
+
     const { setSize, windowWidth } = getLogTableContext();
     const root = React.useRef<HTMLDivElement>();
     React.useEffect(() => {
@@ -115,11 +119,13 @@ const ExpandedDocument  = ({ log, index, datasourceUid, datasourceName, datasour
                 </tr>
                 {
                     Array.from(log.keys()).map((key) => (
-                        <ExpandedLogKeyVal
-                            field={key}
-                            val={log.get(key)}
-                            key={key}
-                        />
+                        key !== '_source' ?
+                            <ExpandedLogKeyVal
+                                field={key}
+                                val={log.get(key)}
+                                key={key}
+                            />
+                        : <></>
                     ))       
                 }
             </table>
@@ -158,11 +164,13 @@ const DocumentCell = (log: Log, style: any, rowIndex: number, expanded: boolean,
         <div style={{maxHeight: '115px', overflow: 'hidden'}}>
             {
                 Array.from(log.keys()).map((key) => (
-                    <LogKeyVal
-                        field={key}
-                        val={log.get(key)}
-                        key={key}
-                    />
+                    key !== '_source' ?
+                        <LogKeyVal
+                            field={key}
+                            val={log.get(key)}
+                            key={key}
+                        />
+                    : <></>
                 ))
             }
         </div>
@@ -260,10 +268,7 @@ const shrinkRows = (expandedRows: boolean[], rowIndex: number, setSize: (index:
 }
 
 
-
 const LogCell = ({ columnIndex, rowIndex, style, data }) => {
-    const log = data.logs[rowIndex];
-    const timestamp = data.timestamps[rowIndex];
     const column = data.columns[columnIndex];
     const setExpandedRowsAndReRender = data.setExpandedRowsAndReRender;
     const expandedRows = data.expandedRows;
@@ -278,12 +283,6 @@ const LogCell = ({ columnIndex, rowIndex, style, data }) => {
     // const _timeField = data.timeField;
     // const _setColumns = data.setColumns
 
-    const handleOnClick = (rowIndex: number): any => {
-        const newExpandedRows = invertRow(expandedRows, rowIndex);
-        shrinkRows(newExpandedRows, rowIndex, setSize);
-        setExpandedRowsAndReRender([...newExpandedRows], rowIndex);
-    }
-
     const outline = darkModeEnabled ? DARK_THEME_OUTLINE : LIGHT_THEME_OUTLINE;
 
     // Handle drawing the borders for the entire row
@@ -310,6 +309,18 @@ const LogCell = ({ columnIndex, rowIndex, style, data }) => {
 
     }
 
+    // The 0th row is the header row, but we still need to render the data in 
+    // row 0. Thus the rowIndex is technically 1 more than the log length 
+    rowIndex -= 1;
+    const log = data.logs[rowIndex];
+    const timestamp = data.timestamps[rowIndex];
+
+    const handleOnClick = (rowIndex: number): any => {
+        const newExpandedRows = invertRow(expandedRows, rowIndex);
+        shrinkRows(newExpandedRows, rowIndex + 1, setSize);
+        setExpandedRowsAndReRender([...newExpandedRows], rowIndex);
+    }
+
     if (column.logColumnType === LogColumnType.TIME) {
         return TimestampCell(timestamp, style, rowIndex, expandedRows, handleOnClick);
     } else if (column.logColumnType === LogColumnType.DOCUMENT) {

src/datasource/components/Logs/LogsTable.tsx

@@ -76,7 +76,7 @@ const LogsTable = ({ logs, timeField, columns, timestamps, expandedRows, setColu
                             columnCount={columns.length}
                             columnWidth={index => columns[index].logColumnType === LogColumnType.TIME ? 300 : width-310}
                             height={height}
-                            rowCount={logs.length}
+                            rowCount={logs.length + 1}
                             rowHeight={getSize}
                             width={width}
                             itemData={{logs, timestamps, columns, timeField, setColumns, setExpandedRowsAndReRender, expandedRows, datasourceUid, datasourceName, datasourceField}}

src/pages/explore.tsx

@@ -687,24 +687,36 @@ const parseAndExtractLogData = (data: DataFrame[]) => {
     let fieldCounts: Map<string, number> = new Map<string, number>();
 
     let mappedFields: Map<string, Field> = new Map<string, Field>();
-    let reconstructedLogs: Log[] = [];
+    let reconstructedLogs: Log[] = [...Array(data[0].length)];
     let timestamps: number[] = [];
 
     for (let unmappedField of data[0].fields) {
+      // TODO: Ignore _source for now. We'll likely need to revisit this
+      // when/if we want to support the JSON view
+      if (unmappedField.name === '_source') {
+        continue
+      }
+
       let unmappedFieldValuesArray = unmappedField.values.toArray();
       let logsWithDefinedValue = unmappedFieldValuesArray.filter((value) => value !== undefined).length;
 
       // TODO: This should be user configurable
       if (unmappedField.name === "_timesinceepoch") {
         timestamps = [ ...unmappedField.values.toArray() ];
       }
-      if (unmappedField.name === "_source") {
-        reconstructedLogs = unmappedField.values.toArray().map(
-          (value: object) => (
-            new Map(Object.entries(value))
-          ));
-        continue;
-      }
+
+      // Convert the dataframe into how we traditionally think of logs
+      unmappedFieldValuesArray.forEach((value, index) => {
+        let newMap = new Map();
+        if (reconstructedLogs[index] !== undefined) {
+          newMap = reconstructedLogs[index];
+        }
+
+        if (value) {
+          newMap.set(unmappedField.name, value);
+          reconstructedLogs[index] = newMap;
+        }
+      })
 
       let mapped_field: Field = {
         name: unmappedField.name,