Console output

package.json

@@ -3,6 +3,7 @@
   "version": "0.0.1",
   "private": true,
   "dependencies": {
+    "@giantmachines/redux-websocket": "^1.5.1",
     "@material-ui/core": "latest",
     "@material-ui/icons": "latest",
     "@types/react": "latest",

src/App.tsx

@@ -13,6 +13,7 @@ import { HistoricalPlanList } from './HistoricalPlanList';
 import { CurrentPlan } from './CurrentPlan';
 import { AppBar, Grid, IconButton, Popover, Toolbar } from '@material-ui/core';
 import { PlanDrawer } from './PlanDrawer';
+import { ConsoleDrawer } from './ConsoleDrawer';
 import { PlanFormContainer } from './PlanFormContainer';
 import nsls2Background from "./assets/nsls2_background.png";
 import logo from './assets/bluesky-logo.svg';
@@ -93,7 +94,8 @@ interface IState {
   queue: string;
   onQueueChange: (queue: string) => void;
   files: File[];
-  drawerOpen: boolean;
+  actionDrawerOpen: boolean;
+  consoleDrawerOpen: boolean;
   planFormVisible: boolean;
 }
 
@@ -145,7 +147,8 @@ class App extends React.Component<IProps, IState> {
       queue: "Start",
       onQueueChange: this.handleQueueChange,
       files: [],
-      drawerOpen: false,
+      actionDrawerOpen: false,
+      consoleDrawerOpen: false,
       planFormVisible: false,
     };
 
@@ -166,9 +169,12 @@ class App extends React.Component<IProps, IState> {
               <AppBar position="absolute" style={{zIndex: 2000}}>
                 <Toolbar>
                   <Box display='flex' flexGrow={1}>
-                    <IconButton color="inherit" aria-label="menu" onClick={this.toggleDrawer.bind(this)}>
+                    <IconButton color="inherit" aria-label="menu" onClick={this.toggleActionDrawer.bind(this)}>
                       Actions
                     </IconButton>
+                    <IconButton color="inherit" aria-label="menu" onClick={this.toggleConsoleDrawer.bind(this)}>
+                      Console
+                    </IconButton>
                     <img src={logo} alt="logo" style={{position: 'absolute', 
                                                         height: '100%',
                                                         left: '50%', 
@@ -203,9 +209,9 @@ class App extends React.Component<IProps, IState> {
               </Grid>   
             </Grid>
             <Copyright/>
-            <PlanDrawer open={this.state.drawerOpen} selectedPlan={this.state.selectedPlan} 
+            <PlanDrawer open={this.state.actionDrawerOpen} selectedPlan={this.state.selectedPlan} 
                         handleSelect={this.handleSelectPlan} plans={this.props.allowedPlans}/>
-
+            <ConsoleDrawer open={this.state.consoleDrawerOpen}/>
           </Container>
             <Popover 
                     anchorOrigin={{
@@ -232,7 +238,7 @@ class App extends React.Component<IProps, IState> {
 
 
   private handleSelectPlan = (selectedPlan: string) => {
-      this.closeDrawer()
+      this.closeActionDrawer()
       this.showPlanForm()
       this.setState({ selectedPlan: selectedPlan });  // Check this line
       this.setState({ editItemUid: ""});
@@ -256,15 +262,31 @@ class App extends React.Component<IProps, IState> {
     });
   }
 
-  private toggleDrawer(){
+  private toggleActionDrawer(){
+    this.setState({
+      actionDrawerOpen: !this.state.actionDrawerOpen
+    })
+    if (this.state.consoleDrawerOpen){
+      this.setState({
+        consoleDrawerOpen: false
+      })
+    }
+  }
+
+  private toggleConsoleDrawer(){
     this.setState({
-      drawerOpen: !this.state.drawerOpen
+      consoleDrawerOpen: !this.state.consoleDrawerOpen
     })
+    if (this.state.actionDrawerOpen){
+      this.setState({
+        actionDrawerOpen: false
+      })
+    }
   }
 
-  private closeDrawer(){
+  private closeActionDrawer(){
     this.setState({
-      drawerOpen: false
+      actionDrawerOpen: false
     })
   }
 

src/ConsoleDrawer.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import Drawer from '@material-ui/core/Drawer';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import { addQueueStop, IAllowedPlans, submitExcel } from './queueserver';
+import { Avatar, Box, Button, ListItemSecondaryAction, MenuItem, Typography } from '@material-ui/core';
+import { Star } from '@material-ui/icons';
+import { BulkAdd } from './bulk';
+
+type IProps = {
+  open: boolean
+};
+
+type IState = {
+    open: boolean;
+}
+
+const styles = (theme: { zIndex: { drawer: number; }; }) => ({
+  appBar: {
+    // Make the app bar z-index always one more than the drawer z-index
+    zIndex: theme.zIndex.drawer + 1,
+  },
+});
+
+export class ConsoleDrawer extends React.Component<IProps, IState>{
+
+    constructor(props: IProps) {
+        super(props);
+        this.state = {
+          open: true }
+      }
+
+    render() {
+        return (
+            <div>
+                <Drawer anchor='left' open={this.props['open']}>
+                  <Box width="20vw" height="2vh"></Box>
+                    <div>
+                        <List>
+                          <Box width="20vw" height="7vh"></Box>
+                          <Typography align="center" variant="h5" component="h1" gutterBottom>
+                             Queue Actions
+                          </Typography>
+                          <ListItem divider={true}>
+                            <ListItemIcon color="secondary">
+                              <Avatar>
+                                <Star />
+                              </Avatar>
+                            </ListItemIcon>
+                            <ListItemText
+                              primary="Bulk insert"
+                              secondary="upload excel sheet"/>
+                            <ListItemSecondaryAction>
+                              <BulkAdd submitExcel={submitExcel}></BulkAdd>
+                            </ListItemSecondaryAction>
+                          </ListItem>
+                          <ListItem divider={true}>
+                            <ListItemIcon color="secondary">
+                              <Avatar>
+                                <Star />
+                              </Avatar>
+                            </ListItemIcon>
+                            <ListItemText
+                              primary="queue_stop"
+                              secondary="stops the queue"/>
+                            <ListItemSecondaryAction>
+                              <Button onClick={() => addQueueStop()} variant="contained" color="primary">
+                                Add
+                              </Button>
+                            </ListItemSecondaryAction>
+                          </ListItem>
+                        </List>
+                    </div>
+                </Drawer>
+            </div>
+        );
+    }
+}

src/HistoricalPlanList.tsx

@@ -71,7 +71,6 @@ export class HistoricalPlanList extends React.Component<HistoricalPlans, Histori
                           <Typography>
                             run_uids: {JSON.stringify(planObject.result.run_uids)}
                           </Typography>
-                          <Previews width="45%" runUid={planObject.result.run_uids[0]}/>
                         </div>
                       </AccordionDetails>
                     </Accordion>

src/index.tsx

@@ -9,9 +9,9 @@ import { IApplicationState } from './store'
 import theme from './theme';
 import { Routes, Route } from 'react-router-dom';
 import { BrowserRouter as Router } from 'react-router-dom';
-
 import App from './App'
 import UserPage from './user'
+import { connect } from '@giantmachines/redux-websocket';
 
 
 interface IProps {
@@ -31,6 +31,8 @@ const Root: React.FunctionComponent<IProps> = props => {
 };
 
 export const store = configureStore();
+// Connect websocket
+store.dispatch(connect(process.env.REACT_APP_HTTP_SERVER || 'ws://localhost:60610/' + 'stream_console_output'));
 
 ReactDOM.render(
   <ThemeProvider theme={theme}>

src/planreducers.ts

@@ -5,7 +5,8 @@ import { IPlanState, IPlanObjectsState,
          IAllowedPlansState, AllowedPlansActions, 
          AllowedPlansActionTypes, IAllowedPlans,
          IHistoricalPlansState, HistoricalPlansActions, 
-         HistoricalPlansActionTypes, IStatus } from "./queueserver";
+         HistoricalPlansActionTypes, IStatus, 
+         IConsoleOutput, ConsoleOutputActions, ConsoleOutputActionTypes } from "./queueserver";
 import { getQueuedPlans, getHistoricalPlans } from './planactions';
 import { store } from "./index"
 
@@ -290,3 +291,32 @@ export const queueModifyReducer: Reducer<IPlanModifyState, PlanActions> = (
         }
     }
 };
+
+
+
+const initialConsoleOutputState: IConsoleOutput = {
+    output: ""
+};
+
+export const consoleOutputReducer: Reducer<IConsoleOutput, ConsoleOutputActions> = (
+    state = initialConsoleOutputState,
+    action
+) => {
+    switch (action.type) {
+        case ConsoleOutputActionTypes.OPEN: {
+            console.log("OPEN REDUCER", action)
+            return state;
+        }
+        case ConsoleOutputActionTypes.CONNECT: {
+            console.log("CONNECT REDUCER", action)
+            return state;
+        }
+        case ConsoleOutputActionTypes.ERROR: {
+            console.log("ERROR REDUCER", action)
+            return state;
+        }
+        default: {
+            return state;
+        }
+    }
+};

src/queueserver.ts

@@ -239,6 +239,41 @@ export type PlanActions =
   | IPlanModifyQueueAction
   | IPlanModifyQueueLoadingAction
 
+export enum ConsoleOutputActionTypes {
+    CONNECT = "REDUX_WEBSOCKET::CONNECT",
+    ERROR = "REDUX_WEBSOCKET::ERROR",
+    OPEN = "REDUX_WEBSOCKET::OPEN",
+    CLOSED = "REDUX_WEBSOCKET::CLOSED",
+    MESSAGE = "REDUX_WEBSOCKET::MESSAGE"
+} 
+
+export interface IConsoleOutputConnectAction {
+    type: ConsoleOutputActionTypes.CONNECT
+}
+
+export interface IConsoleOutputErrorAction {
+    type: ConsoleOutputActionTypes.ERROR
+}
+
+export interface IConsoleOutputOpenAction {
+    type: ConsoleOutputActionTypes.OPEN
+}
+
+export interface IConsoleOutputClosedAction {
+    type: ConsoleOutputActionTypes.CLOSED
+}
+
+export interface IConsoleOutputMessageAction {
+    type: ConsoleOutputActionTypes.MESSAGE
+}
+
+export type ConsoleOutputActions =
+  | IConsoleOutputErrorAction
+  | IConsoleOutputMessageAction
+  | IConsoleOutputOpenAction
+  | IConsoleOutputClosedAction
+  | IConsoleOutputConnectAction
+
 export interface IPlanState {
     readonly plan: IPlan;
     readonly planLoading: boolean;
@@ -271,6 +306,10 @@ export interface IStatus {
     task_results_uid: string  
 }
 
+export interface IConsoleOutput {
+    output: string
+}
+
 export const getStatus = async(): Promise<IStatus> => {
     const res = await axiosInstance.get('/status');
     return res.data;

src/store.tsx

@@ -1,10 +1,12 @@
 import { applyMiddleware, combineReducers, createStore, Store, compose } from "redux"
 import thunk from "redux-thunk"
 import { planObjectsReducer, planReducer, planSubmitReducer,
-    environmentModifyReducer, queueModifyReducer, allowedPlansReducer, historicalPlansReducer, statusReducer } from "./planreducers"
-import { IStatus, IPlanState, IPlanObjectsState, IPlanSubmitState, IPlanModifyState, IAllowedPlansState, IHistoricalPlansState} from "./queueserver"
+    environmentModifyReducer, queueModifyReducer, allowedPlansReducer, historicalPlansReducer, statusReducer, consoleOutputReducer } from "./planreducers"
+import { IStatus, IPlanState, IPlanObjectsState, IPlanSubmitState, IPlanModifyState, IAllowedPlansState, IHistoricalPlansState, IConsoleOutput} from "./queueserver"
 import { userReducer } from "./userreducers"
 import { IUserState } from "./facility"
+import reduxWebsocket from '@giantmachines/redux-websocket';
+
 
 export interface IApplicationState {
     plan: IPlanState;
@@ -16,6 +18,7 @@ export interface IApplicationState {
     queue: IPlanModifyState;
     user: IUserState;
     status: IStatus;
+    output: IConsoleOutput;
 }
 
 const rootReducer = combineReducers<IApplicationState>({
@@ -28,10 +31,12 @@ const rootReducer = combineReducers<IApplicationState>({
     queue: queueModifyReducer,
     user: userReducer,
     status: statusReducer,
+    output: consoleOutputReducer
 })
 
 export default function configureStore(): Store<IApplicationState> {
     const composeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
-    const store = createStore(rootReducer, undefined, composeEnhancers(applyMiddleware(thunk)));
+    const reduxWebsocketMiddleware = reduxWebsocket();
+    const store = createStore(rootReducer, undefined, composeEnhancers(applyMiddleware(thunk, reduxWebsocketMiddleware)));
     return store;
 }

yarn.lock

@@ -1084,6 +1084,13 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@giantmachines/redux-websocket@^1.5.1":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@giantmachines/redux-websocket/-/redux-websocket-1.5.1.tgz#90a335f531d31a54e1217d051014cde0f69dd28b"
+  integrity sha512-s/vyWsfjyCK7lRWgRk4gjV1mg0E6kjxcKE1y4wUrE4kBf3Vvtj64g/fIe1w6Jw5UaoABrEjm4XxQVOXOAaOSAg==
+  dependencies:
+    redux "~4"
+
 "@humanwhocodes/config-array@^0.9.2":
   version "0.9.2"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.9.2.tgz"
@@ -7292,7 +7299,7 @@ redux-thunk@*, redux-thunk@^2.3.0:
   resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.4.1.tgz"
   integrity sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==
 
-redux@^4.0.0, redux@^4.0.5:
+redux@^4.0.0, redux@^4.0.5, redux@~4:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.1.2.tgz"
   integrity sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw==