Factor exporter Progress into BuildStepsProgress

This commit is contained in:
Florian Rival
2018-06-12 17:28:03 +01:00
parent fdbc91137c
commit bf231c6c07
7 changed files with 131 additions and 122 deletions

View File

@@ -23,6 +23,10 @@ type Props = {|
onDownload: (key: string) => void,
|};
/**
* Show an estimate of the progress of a build or the button
* to download the artifacts.
*/
export default ({ build, onDownload }: Props) => {
const buttons = [
{

View File

@@ -1,15 +1,37 @@
// @flow
import * as React from 'react';
import { Step, Stepper, StepLabel, StepContent } from 'material-ui/Stepper';
import CircularProgress from 'material-ui/CircularProgress';
import LinearProgress from 'material-ui/LinearProgress';
import { Line, Spacer } from '../../../UI/Grid';
import BuildProgress from '../../Builds/BuildProgress';
import { Line, Spacer } from '../../UI/Grid';
import BuildProgress from './BuildProgress';
import { type Build } from '../../Utils/GDevelopServices/Build';
const styles = {
stepper: { flex: 1 },
};
//TODO: Factor in BuildProgressSteps
export type BuildStep =
| ''
| 'export'
| 'compress'
| 'upload'
| 'waiting-for-build'
| 'build';
type Props = {|
exportStep: BuildStep,
onDownload: (key: string) => void,
build: ?Build,
uploadMax: number,
uploadProgress: number,
errored: boolean,
|};
/**
* Can be used in an exporter to show the overall progress of a build
* (including local archiving/upload steps and remote build progress)
*/
export default ({
exportStep,
onDownload,
@@ -17,7 +39,7 @@ export default ({
uploadMax,
uploadProgress,
errored,
}) => (
}: Props) => (
<Stepper
activeStep={
exportStep === 'export'
@@ -70,6 +92,7 @@ export default ({
<Step>
<StepLabel>Build and download</StepLabel>
<StepContent>
{!build && <p>Build is starting...</p>}
{build && <BuildProgress build={build} onDownload={onDownload} />}
</StepContent>
</Step>

View File

@@ -49,7 +49,7 @@ export default ({ builds, onDownload }: Props) => {
return (
<Paper style={styles.buildContainer} key={build.id}>
<p>
{build.type} - Finished on{' '}
{build.type} - Last updated on{' '}
{format(build.updatedAt, 'YYYY-MM-DD HH:mm:ss')}
</p>
{!isOld && (

View File

@@ -16,7 +16,6 @@ import { Column, Line } from '../../../UI/Grid';
import { showErrorBox } from '../../../UI/Messages/MessageBox';
import { findGDJS } from '../LocalGDJSFinder';
import localFileSystem from '../LocalFileSystem';
import Progress from './Progress';
import { archiveFolder } from '../../../Utils/Archiver';
import optionalRequire from '../../../Utils/OptionalRequire.js';
import Window from '../../../Utils/Window';
@@ -29,23 +28,17 @@ import {
import { translate, type TranslatorProps } from 'react-i18next';
import { type Limit } from '../../../Utils/GDevelopServices/Usage';
import BuildsWatcher from '../../Builds/BuildsWatcher';
import BuildStepsProgress, {
type BuildStep,
} from '../../Builds/BuildStepsProgress';
const path = optionalRequire('path');
const os = optionalRequire('os');
const electron = optionalRequire('electron');
const ipcRenderer = electron ? electron.ipcRenderer : null;
const gd = global.gd;
export type LocalOnlineCordovaExportStep =
| ''
| 'export'
| 'compress'
| 'upload'
| 'waiting-for-build'
| 'build';
type State = {
exportStep: LocalOnlineCordovaExportStep,
exportStep: BuildStep,
build: ?Build,
uploadProgress: number,
uploadMax: number,
@@ -297,7 +290,7 @@ class LocalOnlineCordovaExport extends Component<Props, State> {
/>
)}
<Line expand>
<Progress
<BuildStepsProgress
exportStep={exportStep}
build={build}
onDownload={this._download}

View File

@@ -1,77 +0,0 @@
import * as React from 'react';
import { Step, Stepper, StepLabel, StepContent } from 'material-ui/Stepper';
import CircularProgress from 'material-ui/CircularProgress';
import LinearProgress from 'material-ui/LinearProgress';
import { Line, Spacer } from '../../../UI/Grid';
import BuildProgress from '../../Builds/BuildProgress';
const styles = {
stepper: { flex: 1 },
};
//TODO: Factor in BuildProgressSteps
export default ({
exportStep,
onDownload,
build,
uploadMax,
uploadProgress,
errored,
}) => (
<Stepper
activeStep={
exportStep === 'export'
? 0
: exportStep === 'compress' || exportStep === 'upload'
? 1
: exportStep === 'waiting-for-build' || exportStep === 'build'
? 2
: undefined
}
orientation="vertical"
style={styles.stepper}
>
<Step>
<StepLabel>Game export</StepLabel>
<StepContent>
<Line alignItems="center">
<CircularProgress size={20} />
<Spacer />
<p>Export in progress...</p>
</Line>
</StepContent>
</Step>
<Step>
<StepLabel>Upload to build service</StepLabel>
<StepContent>
{errored ? (
<p>
Can't upload your game to the build service. Please check your
internet connection or try again later
</p>
) : exportStep === 'compress' ? (
<Line alignItems="center">
<CircularProgress size={20} />
<Spacer />
<p>Compressing before upload...</p>
</Line>
) : (
<Line alignItems="center" expand>
<LinearProgress
style={{ flex: 1 }}
max={uploadMax}
value={uploadProgress}
mode="determinate"
/>
</Line>
)}
</StepContent>
</Step>
<Step>
<StepLabel>Build and download</StepLabel>
<StepContent>
{build && <BuildProgress build={build} onDownload={onDownload} />}
</StepContent>
</Step>
</Stepper>
);

View File

@@ -16,7 +16,6 @@ import { Column, Line } from '../../../UI/Grid';
import { showErrorBox } from '../../../UI/Messages/MessageBox';
import { findGDJS } from '../LocalGDJSFinder';
import localFileSystem from '../LocalFileSystem';
import Progress from './Progress';
import { archiveFolder } from '../../../Utils/Archiver';
import optionalRequire from '../../../Utils/OptionalRequire.js';
import Window from '../../../Utils/Window';
@@ -29,23 +28,17 @@ import {
import { translate, type TranslatorProps } from 'react-i18next';
import { type Limit } from '../../../Utils/GDevelopServices/Usage';
import BuildsWatcher from '../../Builds/BuildsWatcher';
import BuildStepsProgress, {
type BuildStep,
} from '../../Builds/BuildStepsProgress';
const path = optionalRequire('path');
const os = optionalRequire('os');
const electron = optionalRequire('electron');
const ipcRenderer = electron ? electron.ipcRenderer : null;
const gd = global.gd;
export type LocalOnlineElectronExportStep =
| ''
| 'export'
| 'compress'
| 'upload'
| 'waiting-for-build'
| 'build';
type State = {
exportStep: LocalOnlineElectronExportStep,
exportStep: BuildStep,
build: ?Build,
uploadProgress: number,
uploadMax: number,
@@ -293,7 +286,7 @@ class LocalOnlineElectronExport extends Component<Props, State> {
/>
)}
<Line expand>
<Progress
<BuildStepsProgress
exportStep={exportStep}
build={build}
onDownload={this._download}

View File

@@ -17,7 +17,6 @@ import LocalFolderPicker from '../UI/LocalFolderPicker';
import LocalFilePicker from '../UI/LocalFilePicker';
import LocalExport from '../Export/LocalExporters/LocalExport';
import LocalCordovaExport from '../Export/LocalExporters/LocalCordovaExport';
import Progress from '../Export/LocalExporters/LocalOnlineCordovaExport/Progress';
import LocalS3Export from '../Export/LocalExporters/LocalS3Export';
import LocalNetworkPreviewDialog from '../Export/LocalExporters/LocalPreviewLauncher/LocalNetworkPreviewDialog';
import TextEditor from '../ObjectEditor/Editors/TextEditor';
@@ -86,6 +85,7 @@ import UserProfileContext from '../Profile/UserProfileContext';
import { SubscriptionCheckDialog } from '../Profile/SubscriptionChecker';
import DebuggerContent from '../Debugger/DebuggerContent';
import BuildProgress from '../Export/Builds/BuildProgress';
import BuildStepsProgress from '../Export/Builds/BuildStepsProgress';
const gd = global.gd;
const {
@@ -261,48 +261,121 @@ storiesOf('LocalCordovaExport', module)
.addDecorator(muiDecorator)
.add('default', () => <LocalCordovaExport project={project} />);
storiesOf('LocalOnlineCordovaExport', module)
storiesOf('BuildStepsProgress', module)
.addDecorator(paperDecorator)
.addDecorator(muiDecorator)
.add('Progress (not started)', () => <Progress exportStep={''} />)
.add('Progress (export)', () => <Progress exportStep={'export'} />)
.add('Progress (compress)', () => <Progress exportStep={'compress'} />)
.add('Progress (upload)', () => <Progress exportStep={'upload'} />)
.add('Progress (upload) (errored)', () => (
<Progress exportStep={'upload'} errored />
.add('BuildStepsProgress (not started)', () => (
<BuildStepsProgress
exportStep={''}
build={null}
onDownload={action('download')}
uploadMax={0}
uploadProgress={0}
errored={false}
/>
))
.add('Progress (waiting-for-build)', () => (
<Progress exportStep={'waiting-for-build'} />
.add('BuildStepsProgress (export)', () => (
<BuildStepsProgress
exportStep={'export'}
build={null}
onDownload={action('download')}
uploadMax={0}
uploadProgress={0}
errored={false}
/>
))
.add('Progress (build)', () => (
<Progress
.add('BuildStepsProgress (compress)', () => (
<BuildStepsProgress
exportStep={'compress'}
build={null}
onDownload={action('download')}
uploadMax={0}
uploadProgress={0}
errored={false}
/>
))
.add('BuildStepsProgress (upload)', () => (
<BuildStepsProgress
exportStep={'upload'}
build={null}
onDownload={action('download')}
uploadMax={100}
uploadProgress={20}
errored={false}
/>
))
.add('BuildStepsProgress (upload) (errored)', () => (
<BuildStepsProgress
exportStep={'upload'}
build={null}
onDownload={action('download')}
uploadMax={100}
uploadProgress={20}
errored
/>
))
.add('BuildStepsProgress (waiting-for-build)', () => (
<BuildStepsProgress
exportStep={'waiting-for-build'}
build={null}
onDownload={action('download')}
uploadMax={100}
uploadProgress={20}
errored
/>
))
.add('BuildStepsProgress (build)', () => (
<BuildStepsProgress
exportStep={'build'}
build={{
id: 'fake-build-id',
userId: 'fake-user-id',
type: 'electron-build',
status: 'pending',
updatedAt: Date.now(),
createdAt: Date.now(),
}}
onDownload={action('download')}
uploadMax={100}
uploadProgress={20}
errored
/>
))
.add('Progress (build) (errored)', () => (
<Progress
.add('BuildStepsProgress (build) (errored)', () => (
<BuildStepsProgress
exportStep={'build'}
build={{
id: 'fake-build-id',
userId: 'fake-user-id',
type: 'cordova-build',
status: 'error',
logsKey: '/fake-error.log',
updatedAt: Date.now(),
createdAt: Date.now(),
}}
onDownload={action('download')}
uploadMax={100}
uploadProgress={20}
errored
/>
))
.add('Progress (build) (complete)', () => (
<Progress
.add('BuildStepsProgress (build) (complete)', () => (
<BuildStepsProgress
exportStep={'build'}
build={{
id: 'fake-build-id',
userId: 'fake-user-id',
type: 'cordova-build',
status: 'complete',
logsKey: '/fake-error.log',
apkKey: '/fake-game.apk',
updatedAt: Date.now(),
createdAt: Date.now(),
}}
onDownload={action('download')}
uploadMax={100}
uploadProgress={20}
errored
/>
));