fix navbar; make columns re-orderable
This commit is contained in:
Iuri Matias
parent
54c48b3cf9
commit
d3ff4c4952
88
src/App.js
88
src/App.js
|
|
@ -1,12 +1,12 @@
|
|||
import React, {useState} from 'react';
|
||||
import { SearchState, SortingState, IntegratedSorting, TreeDataState, CustomTreeData, FilteringState, IntegratedFiltering, TableColumnVisibility } from '@devexpress/dx-react-grid';
|
||||
import { Grid, Table, TableHeaderRow, TableTreeColumn, TableFilterRow, SearchPanel, Toolbar, ColumnChooser } from '@devexpress/dx-react-grid-bootstrap4';
|
||||
import { SearchState, SortingState, IntegratedSorting, TreeDataState, CustomTreeData, FilteringState, IntegratedFiltering, TableColumnVisibility} from '@devexpress/dx-react-grid';
|
||||
import { Grid, Table, TableHeaderRow, TableTreeColumn, TableFilterRow, SearchPanel, Toolbar, ColumnChooser, TableColumnResizing, DragDropProvider, TableColumnReordering } from '@devexpress/dx-react-grid-bootstrap4';
|
||||
import Convert from 'ansi-to-html';
|
||||
import stripAnsi from 'strip-ansi';
|
||||
import ReactJson from 'react-json-view';
|
||||
import './App.css';
|
||||
import Logs from './Logs.js';
|
||||
import {Button, Card, Collapse} from 'react-bootstrap';
|
||||
import {Button, Card, Collapse, Navbar, Nav, Container} from 'react-bootstrap';
|
||||
import ReactBootstrapSlider from 'react-bootstrap-slider';
|
||||
|
||||
import all_data from './log.json'
|
||||
|
|
@ -20,8 +20,35 @@ let session_object = Object.values(all_data).find((x) => x.session === x.id)
|
|||
|
||||
let data = [session_object];
|
||||
|
||||
function Section({title, children}) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const ImportFromFileBodyComponent = () => {
|
||||
let fileReader;
|
||||
|
||||
const handleFileRead = (e) => {
|
||||
const content = fileReader.result;
|
||||
console.log(content);
|
||||
// … do something with the 'content' …
|
||||
};
|
||||
|
||||
const handleFileChosen = (file) => {
|
||||
if (!file) return;
|
||||
fileReader = new FileReader();
|
||||
fileReader.onloadend = handleFileRead;
|
||||
fileReader.readAsText(file);
|
||||
};
|
||||
|
||||
return <div className='upload-expense'>
|
||||
<input type='file'
|
||||
id='file'
|
||||
className='input-file'
|
||||
accept='.csv'
|
||||
onChange={e => handleFileChosen(e.target.files[0])}
|
||||
/>
|
||||
</div>;
|
||||
};
|
||||
|
||||
|
||||
function Section({title, children, defaultOpen}) {
|
||||
const [open, setOpen] = useState(defaultOpen);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -54,6 +81,7 @@ class App extends React.PureComponent {
|
|||
{ name: 'session', title: 'Session' },
|
||||
{ name: 'parent_id', title: 'Parent' },
|
||||
{ name: 'id', title: 'Id' },
|
||||
{ name: 'step', title: 'Step' },
|
||||
{ name: 'name', title: 'Name' },
|
||||
{ name: 'type', title: 'Type' },
|
||||
{ name: 'timestamp', title: 'Timestamp' },
|
||||
|
|
@ -65,8 +93,23 @@ class App extends React.PureComponent {
|
|||
tableColumnExtensions: [{ columnName: 'name', width: 300 }],
|
||||
// defaultExpandedRowIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27]
|
||||
defaultExpandedRowIds: [],
|
||||
defaultHiddenColumnNames: ['session', 'parent_id', 'id', 'error']
|
||||
defaultHiddenColumnNames: ['session', 'parent_id', 'id', 'error'],
|
||||
// defaultHiddenColumnNames: []
|
||||
defaultColumnWidths: [
|
||||
// { columnName: 'step', width: 10 },
|
||||
|
||||
{ columnName: 'session', width: 200 },
|
||||
{ columnName: 'parent_id', width: 200 },
|
||||
{ columnName: 'id', width: 200 },
|
||||
{ columnName: 'step', width: 150 },
|
||||
{ columnName: 'name', width: 400 },
|
||||
{ columnName: 'type', width: 200 },
|
||||
{ columnName: 'timestamp', width: 200 },
|
||||
// { name: 'error', width: 200 },
|
||||
// { name: 'inputs', width: 200 },
|
||||
{ columnName: 'msg', width: 200 },
|
||||
],
|
||||
defaultOrder: ['session', 'parent_id', 'id', 'step', 'name', 'type', 'timestamp', 'msg']
|
||||
};
|
||||
|
||||
this.previousLog = () => {
|
||||
|
|
@ -76,6 +119,7 @@ class App extends React.PureComponent {
|
|||
let newItem = all_data_ordered[this.state.current_index - 1]
|
||||
data.pop();
|
||||
nextLogs.pop()
|
||||
newItem.step = this.state.current_index - 1
|
||||
this.setState({
|
||||
rows: nextRows,
|
||||
current_index: (this.state.current_index - 1),
|
||||
|
|
@ -95,6 +139,7 @@ class App extends React.PureComponent {
|
|||
nextLogs.push("") // easier to slice it after...
|
||||
}
|
||||
newItem.name = stripAnsi(newItem.name)
|
||||
newItem.step = this.state.current_index + 1
|
||||
data.push(newItem)
|
||||
this.setState({
|
||||
rows: nextRows,
|
||||
|
|
@ -117,6 +162,7 @@ class App extends React.PureComponent {
|
|||
if (value < this.state.current_index) {
|
||||
let diff = this.state.current_index - value;
|
||||
for (let i=0; i<diff; i++) {
|
||||
// TODO: instead do this 'in place' THEN do the setState
|
||||
this.previousLog();
|
||||
}
|
||||
}
|
||||
|
|
@ -124,6 +170,7 @@ class App extends React.PureComponent {
|
|||
if (value > this.state.current_index) {
|
||||
let diff = value - this.state.current_index;
|
||||
for (let i=0; i<diff; i++) {
|
||||
// TODO: instead do this 'in place' THEN do the setState
|
||||
this.nextLog();
|
||||
}
|
||||
}
|
||||
|
|
@ -133,14 +180,23 @@ class App extends React.PureComponent {
|
|||
render() {
|
||||
return (
|
||||
<div>
|
||||
step: {this.state.current_index} id: {this.state.current_id}
|
||||
<button onClick={this.previousLog}>Previous</button>
|
||||
<ReactBootstrapSlider min={0} max={this.state.max_index} change={this.changeValue} value={this.state.current_index} />
|
||||
<button onClick={this.nextLog}>Next</button>
|
||||
<div className="card">
|
||||
<Navbar fixed="top" style={{"background-color": "white", "border-bottom": "1px solid black"}}>
|
||||
{/* <ImportFromFileBodyComponent /> */}
|
||||
<Navbar.Brand href="#">StructLog</Navbar.Brand>
|
||||
<Nav className="mr-auto">
|
||||
step: {this.state.current_index} id: {this.state.current_id}
|
||||
</Nav>
|
||||
< inline>
|
||||
<button onClick={this.previousLog}>Previous</button>
|
||||
<ReactBootstrapSlider min={0} max={this.state.max_index} change={this.changeValue} value={this.state.current_index} />
|
||||
<button onClick={this.nextLog}>Next</button>
|
||||
</inline>
|
||||
</Navbar>
|
||||
<div style={{"margin-top": "55px"}}>
|
||||
<Section title="Current" defaultOpen={true}>
|
||||
<ReactJson src={this.state.current} theme="monokai" groupArraysAfterLength={5} name={false} />
|
||||
</div>
|
||||
<Section title="Console Output">
|
||||
</Section>
|
||||
<Section title="Console Output" defaultOpen={true}>
|
||||
<Logs>
|
||||
{this.state.logs.map((item, i) => {
|
||||
return (
|
||||
|
|
@ -151,7 +207,7 @@ class App extends React.PureComponent {
|
|||
})}
|
||||
</Logs>
|
||||
</Section>
|
||||
<Section title="Logs">
|
||||
<Section title="Logs" defaultOpen={true}>
|
||||
<Grid rows={this.state.rows} columns={this.state.columns} >
|
||||
<TreeDataState defaultExpandedRowIds={this.state.defaultExpandedRowIds} />
|
||||
<CustomTreeData getChildRows={this.getChildRows} />
|
||||
|
|
@ -160,11 +216,14 @@ class App extends React.PureComponent {
|
|||
<IntegratedFiltering />
|
||||
<SortingState defaultSorting={[{ columnName: 'Timestamp', direction: 'asc' }]} />
|
||||
<IntegratedSorting />
|
||||
<DragDropProvider />
|
||||
<Table columnExtensions={this.state.tableColumnExtensions} />
|
||||
<TableColumnResizing defaultColumnWidths={this.state.defaultColumnWidths} />
|
||||
<TableHeaderRow showSortingControls />
|
||||
<TableColumnVisibility
|
||||
defaultHiddenColumnNames={this.state.defaultHiddenColumnNames}
|
||||
/>
|
||||
<TableColumnReordering defaultOrder={this.state.defaultOrder} />
|
||||
<Toolbar />
|
||||
<SearchPanel />
|
||||
<TableFilterRow showFilterSelector={true} />
|
||||
|
|
@ -172,6 +231,7 @@ class App extends React.PureComponent {
|
|||
<ColumnChooser />
|
||||
</Grid>
|
||||
</Section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue