let AppCard = ({
app,
icon,
}) => {
let canBrowse = app.serverInfo.error ? null : () => history.push(html`/apps/${app.slug}/browser`);
let versionMessage = app.serverInfo.error ?
<div className={styles.serverVersion}>Server not reachable: <span className={styles.ago}>{app.serverInfo.error.toString()}</span></div>:
<div className={styles.serverVersion}>
Server URL: <span className={styles.ago}>{app.serverURL || 'unknown'}</span>
Server version: <span className={styles.ago}>{app.serverInfo.parseServerVersion || 'unknown'}</span>
</div>;
return <li onClick={canBrowse}>
<a className={styles.icon}>
{icon ? <img src={'appicons/' + icon} width={56} height={56}/> : <Icon width={56} height={56} name='blank-app-outline' fill='#1E384D' />}
</a>
<div className={styles.details}>
<a className={styles.appname}>{app.name}</a>
{versionMessage}
</div>
<CountsSection className={styles.glance} title='At a glance'>
<AppBadge production={app.production} />
<Metric number={dash(app.users, prettyNumber(app.users))} label='total users' />
<Metric number={dash(app.installations, prettyNumber(app.installations))} label='total installations' />
</CountsSection>
</li>
}
let StatusBar = ({
errorMessage,
rowsMigrated,
classesMigrated,
migrationSpeed,
secondsRemainingStr,
detailsVisible,
}) => {
let classes = [styles.statusBar, detailsVisible ? styles.statusBottomCorners : ''];
if (errorMessage) {
classes.push(styles.migrationStatusError);
return <div className={classes.join(' ')}>{errorMessage}</div>
}
return <div className={classes.join(' ')}>
<StatusBarNote note='Rows Migrated: ' value={prettyNumber(rowsMigrated)} />
<StatusBarNote note='Classes Migrated: ' value={prettyNumber(classesMigrated)} />
<StatusBarNote note='Speed: ' value={prettyNumber(migrationSpeed) + ' rows/s'} />
<StatusBarNote note='ETA: ' value={secondsRemainingStr} />
</div>
}
{labels.map((v, i) => <div key={v} className={styles.label} style={{ top: labelHeights[i] }}>{prettyNumber(v)}</div>)}