add orders panel

frontend/api/bbgo.js

@@ -9,6 +9,13 @@ export function querySessions(cb) {
         });
 }
 
+export function queryOrders(params, cb) {
+    axios.get(baseURL + '/api/orders', { params: params })
+        .then(response => {
+            cb(response.data.orders)
+        });
+}
+
 export function queryAssets(cb) {
     axios.get(baseURL + '/api/assets', {})
         .then(response => {

frontend/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@material-ui/core": "^4.11.2",
+    "@material-ui/data-grid": "^4.0.0-alpha.18",
     "@material-ui/icons": "^4.11.2",
     "@nivo/bar": "^0.67.0",
     "@nivo/core": "^0.67.0",

frontend/pages/orders.js

@@ -1,10 +1,28 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 
 import {makeStyles} from '@material-ui/core/styles';
 import Container from '@material-ui/core/Container';
 import Typography from '@material-ui/core/Typography';
 import Box from '@material-ui/core/Box';
 import Paper from '@material-ui/core/Paper';
+import {queryOrders} from '../api/bbgo';
+import {DataGrid} from '@material-ui/data-grid';
+
+const columns = [
+    {field: 'gid', headerName: 'GID', width: 80, type: 'number'},
+    {field: 'clientOrderID', headerName: 'Client Order ID', width: 130 },
+    {field: 'exchange', headerName: 'Exchange'},
+    {field: 'symbol', headerName: 'Symbol'},
+    {field: 'orderType', headerName: 'Type'},
+    {field: 'side', headerName: 'Side', width: 90},
+    {field: 'price', headerName: 'Price', width: 120, type: 'number'},
+    {field: 'quantity', headerName: 'Quantity', width: 120, type: 'number'},
+    {field: 'executedQuantity', headerName: 'Executed Quantity', width: 120, type: 'number'},
+    {field: 'status', headerName: 'Status'},
+    {field: 'isMargin', headerName: 'Margin'},
+    {field: 'isIsolated', headerName: 'Isolated'},
+    {field: 'creationTime', headerName: 'Create Time'},
+];
 
 const useStyles = makeStyles((theme) => ({
     paper: {
@@ -15,6 +33,14 @@ const useStyles = makeStyles((theme) => ({
 export default function Orders() {
     const classes = useStyles();
 
+    const [orders, setOrders] = useState([])
+
+    useEffect(() => {
+        queryOrders({}, (orders) => {
+            setOrders(orders.map((o) => { o.id = o.gid; return o }))
+        })
+    }, [])
+
     return (
         <Container>
             <Box m={4}>
@@ -23,6 +49,12 @@ export default function Orders() {
                         Orders
                     </Typography>
                 </Paper>
+                <DataGrid
+                    rows={orders}
+                    columns={columns}
+                    pageSize={50}
+                    autoHeight={true}
+                    checkboxSelection/>
             </Box>
         </Container>
     );

frontend/yarn.lock

@@ -143,6 +143,15 @@
     react-is "^16.8.0 || ^17.0.0"
     react-transition-group "^4.4.0"
 
+"@material-ui/data-grid@^4.0.0-alpha.18":
+  version "4.0.0-alpha.18"
+  resolved "https://registry.yarnpkg.com/@material-ui/data-grid/-/data-grid-4.0.0-alpha.18.tgz#d078a518dd5671f0d1d3fe2de8449b94b8547e9f"
+  integrity sha512-t4wikroS2s3Aj+zM/mDfG5+8gfF2okUffKRppIqZQVIn+n3K4pAexWC10wqc8ohNFzBEgGzwQjTXEt+Hy2PX0A==
+  dependencies:
+    "@material-ui/utils" "^5.0.0-alpha.14"
+    prop-types "^15.7.2"
+    reselect "^4.0.0"
+
 "@material-ui/icons@^4.11.2":
   version "4.11.2"
   resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.11.2.tgz#b3a7353266519cd743b6461ae9fdfcb1b25eb4c5"
@@ -196,6 +205,17 @@
     prop-types "^15.7.2"
     react-is "^16.8.0 || ^17.0.0"
 
+"@material-ui/utils@^5.0.0-alpha.14":
+  version "5.0.0-alpha.24"
+  resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-5.0.0-alpha.24.tgz#4d25895581ef5daaf965c06ca40a2ad108ca5309"
+  integrity sha512-di0zaQKHiRi6NwPAt/4mRNfUYTa5aWVTqfzTYN/OdnQTGtOLPPFo9Om+uYgkunZIOa3lsahveo6ieH/YgFnJfQ==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@types/prop-types" "^15.7.3"
+    "@types/react-is" "^16.7.1 || ^17.0.0"
+    prop-types "^15.7.2"
+    react-is "^16.8.0 || ^17.0.0"
+
 "@next/env@10.0.5":
   version "10.0.5"
   resolved "https://registry.yarnpkg.com/@next/env/-/env-10.0.5.tgz#446e59ee7a8d05061be784b24732c369653038ab"
@@ -431,11 +451,18 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.22.tgz#0d29f382472c4ccf3bd96ff0ce47daf5b7b84b18"
   integrity sha512-g+f/qj/cNcqKkc3tFqlXOYjrmZA+jNBiDzbP3kH+B+otKFqAdPgVTGP1IeKRdMml/aE69as5S4FqtxAbl+LaMw==
 
-"@types/prop-types@*":
+"@types/prop-types@*", "@types/prop-types@^15.7.3":
   version "15.7.3"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
   integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
 
+"@types/react-is@^16.7.1 || ^17.0.0":
+  version "17.0.0"
+  resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-17.0.0.tgz#6b60190ae60591ae0c83d6f3854e61e08f5a7976"
+  integrity sha512-A0DQ1YWZ0RG2+PV7neAotNCIh8gZ3z7tQnDJyS2xRPDNtAtSPcJ9YyfMP8be36Ha0kQRzbZCrrTMznA4blqO5g==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-transition-group@^4.2.0":
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.0.tgz#882839db465df1320e4753e6e9f70ca7e9b4d46d"
@@ -4161,6 +4188,11 @@ repeat-string@^1.6.1:
   resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
   integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc=
 
+reselect@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.0.0.tgz#f2529830e5d3d0e021408b246a206ef4ea4437f7"
+  integrity sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA==
+
 resize-observer-polyfill@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"