Bugfixes: Add to timeline dialog broke

Add to timeline dialog broke due to the recent API changes.
CSS Fix for compressed JSON objects
Add column compression for event timeline viewer.

gui/velociraptor/src/components/core/paged-table.css

@@ -90,7 +90,7 @@ td.column-resizer {
     vertical-align: top;
 }
 
-.paged-table tbody tr td.compact div {
+.paged-table tbody tr td.compact > div {
     max-height: 2em;
 }
 

gui/velociraptor/src/components/core/paged-table.jsx

@@ -300,6 +300,19 @@ export class TablePaginationControl extends React.Component {
         goto_error: false,
     }
 
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        // The current cursor points beyond the end of the table, seek
+        // to the last page. This can happen if the table suddenly
+        // shrinks.
+        if (this.props.start_row > this.props.total_size) {
+            let last_page = this.getLastPage();
+            let last_row = last_page * this.props.page_size;
+            if(last_row !== this.props.start_row) {
+                this.props.onRowChange(last_row);
+            }
+        }
+    }
+
     renderLabel = (start, end, total_size)=>{
         end = end || 0;
         start = start || 0;
@@ -318,7 +331,7 @@ export class TablePaginationControl extends React.Component {
         return <>{padding}{start}-{end}/{total_size}</>;
     }
 
-    render() {
+    getLastPage = ()=>{
         let total_size = parseInt(this.props.total_size || 0);
         let total_pages = parseInt(total_size / this.props.page_size) + 1;
         let last_page = total_pages - 1;
@@ -333,6 +346,11 @@ export class TablePaginationControl extends React.Component {
             last_page = 0;
         }
 
+        return last_page;
+    }
+
+    render() {
+        let last_page = this.getLastPage();
         let pages = [];
         let current_page = parseInt(this.props.start_row / this.props.page_size);
         let start_page = current_page - 4;

gui/velociraptor/src/components/events/timeline-viewer.jsx

@@ -22,6 +22,7 @@ import Button from 'react-bootstrap/Button';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import UserConfig from '../core/user.jsx';
 import ColumnResizer from "../core/column-resizer.jsx";
+import ButtonGroup from 'react-bootstrap/ButtonGroup';
 
 import { ColumnToggle } from '../core/paged-table.jsx';
 
@@ -180,7 +181,35 @@ class EventTableRenderer  extends Component {
                          e.dataTransfer.dropEffect = "move";
                      }}
                      draggable="true">
-                   { T(column_name) }
+                   <span className="column-name">
+                      { T(column_name) }
+                   </span>
+                   <span className="sort-element">
+                     <ButtonGroup className="hover-buttons">
+                       <Button
+                         size="sm"
+                         type="button"
+                         variant="outline-dark"
+                         className="hidden-edit"
+                         onClick={()=>{
+                             let compact_columns = Object.assign(
+                                 {}, this.state.compact_columns);
+                             compact_columns[column] = !compact_columns[column];
+                             this.setState({
+                                 compact_columns: compact_columns,
+                             });
+                         }}>
+                         { !this.state.compact_columns[column] ?
+                           <ToolTip tooltip={T("Compact Column")}>
+                             <FontAwesomeIcon icon="compress"/>
+                           </ToolTip> :
+                           <ToolTip tooltip={T("Expand Column")}>
+                             <FontAwesomeIcon icon="expand"/>
+                           </ToolTip>
+                         }
+                       </Button>
+                     </ButtonGroup>
+                   </span>
                  </th>
                  <ColumnResizer
                    width={this.state.column_widths[column]}
@@ -239,11 +268,30 @@ class EventTableRenderer  extends Component {
         let clsname = is_collapsed ? "compact": "";
 
         return <React.Fragment key={column}>
-                 <td key={column}>
+                 <td key={column}
+                     className={clsname}
+                     onClick={()=>{
+                         // If the column is not collapsed no click handler!
+                         if(!is_collapsed) return;
+
+                         // The cell is collapsed, we need to expand it:
+
+                         // If the entire column is collapsed we need
+                         // to specify that only this row is expanded.
+                         let column_desc = this.state.compact_columns[column];
+                         if(column_desc === true) {
+                             column_desc = {};
+                         }
+                         column_desc[rowIdx.toString()]=true;
+                         let compact_columns = Object.assign(
+                             {}, this.state.compact_columns);
+                         compact_columns[column] = column_desc;
+                         this.setState({compact_columns: compact_columns});
+                     }}>
+
                    { renderer(cell, row, this.props.env)}
                  </td>
                  <ColumnResizer
-                   className={clsname}
                    width={this.state.column_widths[column]}
                    setWidth={x=>{
                        let column_widths = Object.assign(

gui/velociraptor/src/components/notebooks/timelines.jsx

@@ -188,10 +188,11 @@ export class AddVQLCellToTimeline extends React.Component {
                 let time_columns = [];
                 let all_columns = [];
                 let rows = response.data.rows;
-                if (!rows) {
+                if (_.isEmpty(rows)) {
                     return;
                 }
-                _.each(response.data.rows[0].cell, (x, idx)=>{
+                let row = JSONparse(rows[0].json) || [];
+                _.each(row, (x, idx)=>{
                     if (this.isTimestamp(x)) {
                         time_columns.push(response.data.columns[idx]);
                     };