From 526f5c9e322952a5398d1a68ed0c3467def6a9fc Mon Sep 17 00:00:00 2001 From: shmck Date: Sat, 18 Apr 2020 16:53:16 -0700 Subject: [PATCH 1/3] setup loading component processes Signed-off-by: shmck --- web-app/src/Routes.tsx | 6 +++--- web-app/src/components/Loading/index.tsx | 6 +++--- web-app/src/containers/Loading/LoadingPage.tsx | 2 +- web-app/src/containers/Loading/index.tsx | 9 +++++---- .../containers/SelectTutorial/LoadTutorialSummary.tsx | 4 ++-- 5 files changed, 14 insertions(+), 13 deletions(-) diff --git a/web-app/src/Routes.tsx b/web-app/src/Routes.tsx index bc934878..fba0d084 100644 --- a/web-app/src/Routes.tsx +++ b/web-app/src/Routes.tsx @@ -25,13 +25,13 @@ const Routes = () => { {/* Setup */} - + - + ] @@ -41,7 +41,7 @@ const Routes = () => { {/* Tutorial */} - + diff --git a/web-app/src/components/Loading/index.tsx b/web-app/src/components/Loading/index.tsx index 26a9733b..d12d2ade 100644 --- a/web-app/src/components/Loading/index.tsx +++ b/web-app/src/components/Loading/index.tsx @@ -2,11 +2,11 @@ import { Loading } from '@alifd/next' import * as React from 'react' interface Props { - text: string + message: string } -const LoadingComponent = ({ text }: Props) => { - return +const LoadingComponent = ({ message }: Props) => { + return } export default LoadingComponent diff --git a/web-app/src/containers/Loading/LoadingPage.tsx b/web-app/src/containers/Loading/LoadingPage.tsx index b9a15228..998869a7 100644 --- a/web-app/src/containers/Loading/LoadingPage.tsx +++ b/web-app/src/containers/Loading/LoadingPage.tsx @@ -22,7 +22,7 @@ const styles = { const LoadingPage = ({ text }: Props) => { return (
- +
) } diff --git a/web-app/src/containers/Loading/index.tsx b/web-app/src/containers/Loading/index.tsx index b539bd47..36a0494a 100644 --- a/web-app/src/containers/Loading/index.tsx +++ b/web-app/src/containers/Loading/index.tsx @@ -2,11 +2,10 @@ import * as React from 'react' import * as T from 'typings' import { css, jsx } from '@emotion/core' import Loading from '../../components/Loading' -import Message from '../../components/Message' interface Props { text: string - context?: T.MachineContext + processes?: T.ProcessEvent[] } const styles = { @@ -20,7 +19,7 @@ const styles = { }, } -const LoadingPage = ({ text }: Props) => { +const LoadingPage = ({ text, processes }: Props) => { const [showLoading, setShowHiding] = React.useState(false) React.useEffect(() => { @@ -38,9 +37,11 @@ const LoadingPage = ({ text }: Props) => { return null } + const message: string = processes && processes.length ? processes[0].title : text + return (
- +
) } diff --git a/web-app/src/containers/SelectTutorial/LoadTutorialSummary.tsx b/web-app/src/containers/SelectTutorial/LoadTutorialSummary.tsx index 05a35bea..ceb19dbb 100644 --- a/web-app/src/containers/SelectTutorial/LoadTutorialSummary.tsx +++ b/web-app/src/containers/SelectTutorial/LoadTutorialSummary.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import useFetch from '../../services/hooks/useFetch' import * as TT from 'typings/tutorial' -import Loading from '../Loading' +import LoadingPage from '../Loading' interface Props { url: string @@ -11,7 +11,7 @@ interface Props { const LoadTutorialSummary = (props: Props) => { const { data, error, loading } = useFetch(props.url) if (loading) { - return + return } if (error) { console.log(`Failed to load tutorial summary: ${error}`) From 5c682a2bb830a4d9902e7db00db0b68b1022dd60 Mon Sep 17 00:00:00 2001 From: shmck Date: Sat, 18 Apr 2020 17:07:15 -0700 Subject: [PATCH 2/3] add processes ui to loading page Signed-off-by: shmck --- .../src/components/ProcessMessages/index.tsx | 2 +- web-app/src/containers/Loading/index.tsx | 18 +++++++++-- web-app/src/services/state/machine.ts | 32 +++++++++---------- web-app/stories/Loading.stories.tsx | 13 +++++++- 4 files changed, 44 insertions(+), 21 deletions(-) diff --git a/web-app/src/components/ProcessMessages/index.tsx b/web-app/src/components/ProcessMessages/index.tsx index 607caf63..c1614c40 100644 --- a/web-app/src/components/ProcessMessages/index.tsx +++ b/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[] } diff --git a/web-app/src/containers/Loading/index.tsx b/web-app/src/containers/Loading/index.tsx index 36a0494a..06253627 100644 --- a/web-app/src/containers/Loading/index.tsx +++ b/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 (
- + + {processes && processes.length && ( +
+ +
+ )}
) } diff --git a/web-app/src/services/state/machine.ts b/web-app/src/services/state/machine.ts index 643a0aba..17d330ca 100644 --- a/web-app/src/services/state/machine.ts +++ b/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', diff --git a/web-app/stories/Loading.stories.tsx b/web-app/stories/Loading.stories.tsx index 84693146..78eded97 100644 --- a/web-app/stories/Loading.stories.tsx +++ b/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', () => ) + .add('Loading', () => ) + .add('Loading processes', () => { + const processes: T.ProcessEvent[] = [ + { + title: 'title', + description: 'description...', + status: 'RUNNING', + }, + ] + return + }) From 8bbf13d0cfa05fae0b0597ddb8b1c2c2dda2f3ff Mon Sep 17 00:00:00 2001 From: shmck Date: Sat, 18 Apr 2020 17:21:43 -0700 Subject: [PATCH 3/3] fix jittery jump when processes appear Signed-off-by: shmck --- web-app/src/containers/Loading/index.tsx | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/web-app/src/containers/Loading/index.tsx b/web-app/src/containers/Loading/index.tsx index 06253627..535946c7 100644 --- a/web-app/src/containers/Loading/index.tsx +++ b/web-app/src/containers/Loading/index.tsx @@ -12,10 +12,10 @@ interface Props { const styles = { page: { position: 'relative' as 'relative', - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - justifyContent: 'center', + display: 'flex' as 'flex', + flexDirection: 'column' as 'column', + alignItems: 'center' as 'center', + justifyContent: 'center' as 'center', height: '100%', width: '100%', }, @@ -29,13 +29,13 @@ const styles = { } const LoadingPage = ({ text, processes }: Props) => { - const [showLoading, setShowHiding] = React.useState(false) + const [showLoading, setShowHiding] = React.useState(!!processes?.length) React.useEffect(() => { // wait some time before showing loading indicator const timeout = setTimeout(() => { setShowHiding(true) - }, 600) + }, 500) return () => { clearTimeout(timeout) } @@ -45,15 +45,14 @@ const LoadingPage = ({ text, processes }: Props) => { if (!showLoading) { return null } - return (
- {processes && processes.length && ( + {processes && processes.length ? (
- )} + ) : null}
) }