Experimentation with Redux and React components

Signed-off-by: Simon Delisle <simon.delisle@ericsson.com>

viewer-prototype/package.json

@@ -28,13 +28,16 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.15",
     "@fortawesome/free-solid-svg-icons": "^5.7.2",
     "@fortawesome/react-fontawesome": "^0.1.4",
-    "react-modal": "^3.8.1"
+    "react-modal": "^3.8.1",
+    "redux": "^4.0.1",
+    "react-redux": "^6.0.1"
   },
   "devDependencies": {
     "@types/chart.js": "^2.7.40",
     "@types/react-grid-layout": "^0.16.5",
     "@types/react-virtualized": "^9.18.12",
     "@types/react-modal": "^3.8.1",
+    "@types/react-redux": "^7.0.6",
     "rimraf": "latest",
     "typescript": "latest"
   },

viewer-prototype/src/browser/test-react-component.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+export interface TestProps {
+    name: string;
+}
+
+export class TestReactComponent extends React.Component<TestProps> {
+    render() {
+        return (
+            <div>
+                {this.props.name}
+            </div>
+        );
+    }
+}

viewer-prototype/src/browser/trace-viewer-widget.tsx

@@ -38,12 +38,17 @@ import { TimeGraphUnitController } from 'timeline-chart/lib/time-graph-unit-cont
 import { TimelineChart } from 'timeline-chart/lib/time-graph-model';
 import { List, ListRowProps } from 'react-virtualized';
 import { EntryTreeNode } from './entry-tree-node';
+import { createStore } from 'redux';
+import { Provider } from 'react-redux';
+import { TestReactComponent } from './test-react-component';
 
 export const TraceViewerWidgetOptions = Symbol('TraceViewerWidgetOptions');
 export interface TraceViewerWidgetOptions {
     traceURI: string;
 }
 
+// export default connect()(TestReactComponent);
+
 @injectable()
 export class TraceViewerWidget extends ReactWidget {
     static ID = 'trace-viewer';
@@ -74,6 +79,15 @@ export class TraceViewerWidget extends ReactWidget {
 
     private unitController: TimeGraphUnitController = new TimeGraphUnitController(0);
 
+    private store = createStore((state, action) => {
+        switch (action.type) {
+            case 'SET_VISIBILITY_FILTER':
+                return action.type;
+            default:
+                return state;
+        }
+    });
+
     constructor(
         @inject(TraceViewerWidgetOptions) protected readonly options: TraceViewerWidgetOptions,
         @inject(TraceManager) private traceManager: TraceManager,
@@ -133,35 +147,38 @@ export class TraceViewerWidget extends ReactWidget {
         this.handleResourcesTimeGraph = this.handleResourcesTimeGraph.bind(this);
         this.handleControlFlowTimeGraph = this.handleControlFlowTimeGraph.bind(this);
         this.handleCpuXY = this.handleCpuXY.bind(this);
-        return <div className='trace-viewer-container'>
-            <div className='time-axis-container'>
-                {this.renderTimeAxis()}
-            </div>
-            <GridLayout className='viewer-grid' cols={1} rowHeight={100} width={1600} draggableHandle={'.widget-handle'}>            
-                {/* <div className='trace-info-container' key='trace-info' data-grid={{x: 0, y: 0, w: 1, h: 3}}>
+        return <Provider store={this.store}>
+            <div className='trace-viewer-container'>
+                <TestReactComponent name={'Simon'}/>
+                <div className='time-axis-container'>
+                    {this.renderTimeAxis()}
+                </div>
+                <GridLayout className='viewer-grid' cols={1} rowHeight={100} width={1600} draggableHandle={'.widget-handle'}>
+                    {/* <div className='trace-info-container' key='trace-info' data-grid={{x: 0, y: 0, w: 1, h: 3}}>
                     {this.renderTraceInfo()}
                 </div> */}
-                <div className='timegraph-info' key='time-graph-resources' data-grid={{x: 0, y: 0, w: 1, h: 4}}>
-                    {this.renderTimeGraph(this.RESOURCES_OUTPUT_ID)}
-                </div>
-                <div className='timegraph-info' key='time-graph-thread' data-grid={{x: 0, y: 0, w: 1, h: 4}}>
-                    {this.renderTimeGraph(this.THREAD_STATUS_OUTPUT_ID)}
-                </div>
-                {/* <div className='fetch-buttons' key='action-buttons' data-grid={{x: 0, y: 0, w: 1, h: 1}}>
+                    <div className='timegraph-info' key='time-graph-resources' data-grid={{ x: 0, y: 0, w: 1, h: 4 }}>
+                        {this.renderTimeGraph(this.RESOURCES_OUTPUT_ID)}
+                    </div>
+                    <div className='timegraph-info' key='time-graph-thread' data-grid={{ x: 0, y: 0, w: 1, h: 4 }}>
+                        {this.renderTimeGraph(this.THREAD_STATUS_OUTPUT_ID)}
+                    </div>
+                    {/* <div className='fetch-buttons' key='action-buttons' data-grid={{x: 0, y: 0, w: 1, h: 1}}>
                     <button onClick={this.handleResourcesTimeGraph}>Resources</button>
                     <button onClick={this.handleControlFlowTimeGraph}>Control Flow View</button>
                     <button onClick={this.handleCpuXY}>CPU Usage</button>
                     <button onClick={this.handleDiskXY}>Disk Usage</button>
                     <button onClick={this.handleHistogramXY}>Histogram</button>
                 </div> */}
-                <div className='xy-info' key='xy-area' data-grid={{x: 0, y: 0, w: 1, h: 6}}>
-                    {this.renderLineChart()}
-                </div>
-                <div key='events-table' data-grid={{x: 0, y: 0, w: 1, h: 5}}>
-                    {this.renderEventsTable()}
-                </div>
-            </GridLayout>
-        </div>;
+                    <div className='xy-info' key='xy-area' data-grid={{ x: 0, y: 0, w: 1, h: 6 }}>
+                        {this.renderLineChart()}
+                    </div>
+                    <div key='events-table' data-grid={{ x: 0, y: 0, w: 1, h: 5 }}>
+                        {this.renderEventsTable()}
+                    </div>
+                </GridLayout>
+            </div>
+        </Provider>;
     }
 
     private renderTimeAxis() {

viewer-prototype/src/common/redux_store_prototype.json

@@ -0,0 +1,50 @@
+{
+  "trace": {
+    "name": "trace",
+    "UUID": "id",
+    "start": 0,
+    "end": 1,
+    "initialRange": [0, 1]
+  },
+  "traceServerURL": "https://traceompass.trace/api",
+  "timeContainerById": [1, 2, 4, 3],
+  "timeContainers": {
+    "1": {
+      "currentTimeRange": [0, 1],
+      "totalRange": [0, 1],
+      "currentTimeSelection": [0, 1],
+      "unitType": "time",
+      "widgetById": [1, 2, 3]
+    },
+    "2": {
+      "currentTimeRange": [0, 1],
+      "totalRange": [0, 1],
+      "currentTimeSelection": [0, 1],
+      "unitType": "time",
+      "widgetById": [4, 5, 6]
+    }
+  },
+  "widgets": {
+    "1": {
+      "name": "TimeGraph 1",
+      "outputId": ["ResourceStatusDataProvider"],
+      "type": "TIME_GRAPH",
+      "appliedFilters": [1, 2, 3],
+      "fetchingStatus": "COMPLETE"
+    },
+    "2": {
+      "name": "TimeGraph 2",
+      "outputId": ["ThreadStatusDataProvider"],
+      "type": "TIME_GRAPH",
+      "appliedFilters": [1, 3],
+      "fetchingStatus": "COMPLETE"
+    },
+    "3": {
+      "name": "XY 1",
+      "outputId": ["CpuUsageDataProvider"],
+      "type": "XY",
+      "appliedFilters": [],
+      "fetchingStatus": "RUNNING"
+    }
+  }
+}