add sequential logger table

src/App.js

@@ -25,6 +25,7 @@ class App extends React.PureComponent {
       modalTitle: "",
       modalContent: {},
       rows: logManager.data,
+      data: logManager.data,
       cols: [
         { name: 'session', title: 'Session', hidden: true },
         { name: 'parent_id', title: 'Parent', hidden: true },
@@ -39,10 +40,11 @@ class App extends React.PureComponent {
       ]
     };
 
-    this.update = (currentStep, nextRows) => {
+    this.update = (nextRows) => {
+      let currentStep = logManager.getCurrentStep();
       this.setState({
         rows: nextRows,
-        data: logManager.data,
+        data: logManager.data.slice(),
         current_index: logManager.currentStep,
         current_id: currentStep.id,
         logs: logManager.logs,
@@ -52,31 +54,22 @@ class App extends React.PureComponent {
 
     this.previousLog = () => {
       const nextRows = this.state.rows.slice();
-
       logManager.previousStep();
-      let currentStep = logManager.getCurrentStep();
+      this.update(nextRows);
-
-      this.update(currentStep, nextRows);
     }
 
     this.nextLog = () => {
       const nextRows = this.state.rows.slice();
-
       logManager.nextStep();
-      let currentStep = logManager.getCurrentStep();
+      this.update(nextRows);
-
-      this.update(currentStep, nextRows);
     }
 
     this.getChildRows = logManager.getChildRows.bind(logManager);
 
     this.goToStep = (value) => {
       const nextRows = this.state.rows.slice();
-
       logManager.goToStep(value);
-      let currentStep = logManager.getCurrentStep();
+      this.update(nextRows);
-
-      this.update(currentStep, nextRows);
     }
 
     this.changeValue = ({target}) => {
@@ -117,7 +110,8 @@ class App extends React.PureComponent {
         <div style={{"margin-top": "55px"}}>
           <ObjectSection log={this.state.current} open={true} />
           <ConsoleSection logs={this.state.logs} open={true} />
-          <LogsSection open={true} cols={this.state.cols} rows={this.state.rows} viewRow={this.viewRow} getChildRows={this.getChildRows} />
+          <LogsSection title={"Sequential Logs"} open={true} isStructured={false} defaultSorting={[{ columnName: 'Timestamp', direction: 'desc' }]} cols={this.state.cols} rows={this.state.data} viewRow={this.viewRow} getChildRows={this.getChildRows} />
+          <LogsSection title={"Structured Logs"} open={true} isStructured={true} defaultSorting={[{ columnName: 'Timestamp', direction: 'asc' }]} cols={this.state.cols} rows={this.state.rows} viewRow={this.viewRow} getChildRows={this.getChildRows} />
         </div>
       </div>
     );

src/ConsoleSection.js

@@ -22,4 +22,3 @@ function ConsoleSection({logs, open}) {
 }
 
 export default ConsoleSection;
-

src/LogsSection.js

@@ -16,23 +16,27 @@ let numberFilterOperations = [
 
 let tableColumnExtensions = [{ columnName: 'name', width: 300, align: 'left' }];
 
-function LogsSection({open, cols, rows, viewRow, getChildRows}) {
+function LogsSection({title, open, isStructured, defaultSorting, cols, rows, viewRow, getChildRows}) {
   let columns = cols;
   let defaultColumnWidths = cols.map((x) => { return {columnName: x.name, width: (x.width || 200)} })
   let defaultHiddenColumnNames = cols.filter((x) => x.hidden).map((x) => x.name)
   let defaultOrder = cols.map((x) => x.name)
 
   return (
-    <Section title="Logs" defaultOpen={open}>
+    <Section title={title} defaultOpen={open}>
       <Grid rows={rows} columns={columns} >
         <LogTypeProvider for={["name"]} onClick={viewRow} />
         <StepTypeProvider for={["step"]} onClick={viewRow} availableFilterOperations={numberFilterOperations} />
         <TreeDataState defaultExpandedRowIds={[]} />
+        {isStructured &&
+          <>
             <CustomTreeData getChildRows={getChildRows} />
+          </>
+        }
         <FilteringState defaultFilters={[]} />
         <SearchState defaultValue="" />
         <IntegratedFiltering />
-        <SortingState defaultSorting={[{ columnName: 'Timestamp', direction: 'asc' }]} />
+        <SortingState defaultSorting={defaultSorting} />
         <IntegratedSorting />
         <DragDropProvider />
         <Table columnExtensions={tableColumnExtensions} />
@@ -43,7 +47,11 @@ function LogsSection({open, cols, rows, viewRow, getChildRows}) {
         <Toolbar />
         <SearchPanel />
         <TableFilterRow showFilterSelector={true} />
+        {isStructured && 
+          <>
             <TableTreeColumn for="name" />
+          </>
+        }
         <ColumnChooser />
       </Grid>
     </Section>
@@ -51,4 +59,3 @@ function LogsSection({open, cols, rows, viewRow, getChildRows}) {
 }
 
 export default LogsSection;
-

src/ObjectSection.js

@@ -11,4 +11,3 @@ function ObjectSection({log, open}) {
 }
 
 export default ObjectSection;
-