add processes ui to loading page

Signed-off-by: shmck <shawn.j.mckay@gmail.com>

Author: ShMcK

web-app/src/components/ProcessMessages/index.tsx

@@ -5,7 +5,7 @@ import { css, jsx } from '@emotion/core'
 import TestMessage from './TestMessage'
 
 interface Props {
-  testStatus: T.TestStatus | null
+  testStatus?: T.TestStatus | null
   processes: T.ProcessEvent[]
 }
 

web-app/src/containers/Loading/index.tsx

@@ -2,6 +2,7 @@ import * as React from 'react'
 import * as T from 'typings'
 import { css, jsx } from '@emotion/core'
 import Loading from '../../components/Loading'
+import ProcessMessages from 'components/ProcessMessages'
 
 interface Props {
   text: string
@@ -12,11 +13,19 @@ const styles = {
   page: {
     position: 'relative' as 'relative',
     display: 'flex',
+    flexDirection: 'column',
     alignItems: 'center',
     justifyContent: 'center',
     height: '100%',
     width: '100%',
   },
+  processes: {
+    padding: '0 1rem',
+    position: 'fixed' as 'fixed',
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
 }
 
 const LoadingPage = ({ text, processes }: Props) => {
@@ -37,11 +46,14 @@ const LoadingPage = ({ text, processes }: Props) => {
     return null
   }
 
-  const message: string = processes && processes.length ? processes[0].title : text
-
   return (
     <div css={styles.page}>
-      <Loading message={message} />
+      <Loading message={text} />
+      {processes && processes.length && (
+        <div css={styles.processes}>
+          <ProcessMessages processes={processes} />
+        </div>
+      )}
     </div>
   )
 }

web-app/src/services/state/machine.ts

@@ -29,6 +29,22 @@ export const createMachine = (options: any) => {
         processes: [],
         testStatus: null,
       },
+      on: {
+        // track commands
+        COMMAND_START: {
+          actions: ['commandStart'],
+        },
+        COMMAND_SUCCESS: {
+          actions: ['commandSuccess'],
+        },
+        COMMAND_FAIL: {
+          actions: ['commandFail'],
+        },
+        ERROR: {
+          // TODO: missing clearError
+          actions: ['setError'],
+        },
+      },
       states: {
         Setup: {
           initial: 'Startup',
@@ -121,22 +137,6 @@ export const createMachine = (options: any) => {
         Tutorial: {
           id: 'tutorial',
           initial: 'Level',
-          on: {
-            // track commands
-            COMMAND_START: {
-              actions: ['commandStart'],
-            },
-            COMMAND_SUCCESS: {
-              actions: ['commandSuccess'],
-            },
-            COMMAND_FAIL: {
-              actions: ['commandFail'],
-            },
-            ERROR: {
-              // TODO: missing clearError
-              actions: ['setError'],
-            },
-          },
           states: {
             LoadNext: {
               id: 'tutorial-load-next',

web-app/stories/Loading.stories.tsx

@@ -1,8 +1,19 @@
 import { storiesOf } from '@storybook/react'
+import * as T from '../../typings'
 import React from 'react'
 import LoadingPage from '../src/containers/Loading'
 import SideBarDecorator from './utils/SideBarDecorator'
 
 storiesOf('Components', module)
   .addDecorator(SideBarDecorator)
-  .add('Loading', () => <LoadingPage text="Content" context={{}} />)
+  .add('Loading', () => <LoadingPage text="Content" />)
+  .add('Loading processes', () => {
+    const processes: T.ProcessEvent[] = [
+      {
+        title: 'title',
+        description: 'description...',
+        status: 'RUNNING',
+      },
+    ]
+    return <LoadingPage text="Content" processes={processes} />
+  })