add queue status to UI
This commit is contained in:
parent
237accc973
commit
0f11873773
|
@ -83,17 +83,18 @@ export function selectActions(state: OnnxState) {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export const IMAGE_ERROR = 'error.image.';
|
export const ANY_ERROR = 'error.';
|
||||||
|
export const IMAGE_ERROR = `${ANY_ERROR}image.`;
|
||||||
export const UNKNOWN_ERROR = `${IMAGE_ERROR}unknown`;
|
export const UNKNOWN_ERROR = `${IMAGE_ERROR}unknown`;
|
||||||
|
|
||||||
export function getImageErrorReason(image: FailedJobResponse | UnknownJobResponse) {
|
export function getImageErrorReason(image: FailedJobResponse | UnknownJobResponse) {
|
||||||
if (image.status === JobStatus.FAILED) {
|
if (image.status === JobStatus.FAILED) {
|
||||||
const error = image.error;
|
const error = image.error;
|
||||||
if (doesExist(error) && error.startsWith(IMAGE_ERROR)) {
|
if (doesExist(error) && error.startsWith(ANY_ERROR)) {
|
||||||
return error;
|
return error;
|
||||||
}
|
}
|
||||||
|
|
||||||
return `${IMAGE_ERROR}.${error}`;
|
return `${IMAGE_ERROR}${error}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
return UNKNOWN_ERROR;
|
return UNKNOWN_ERROR;
|
||||||
|
|
|
@ -3,7 +3,7 @@ import { Box, Button, Card, CardContent, CircularProgress, Typography } from '@m
|
||||||
import { Stack } from '@mui/system';
|
import { Stack } from '@mui/system';
|
||||||
import { useMutation, useQuery } from '@tanstack/react-query';
|
import { useMutation, useQuery } from '@tanstack/react-query';
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { useContext, useEffect } from 'react';
|
import { useContext, useEffect, useMemo } from 'react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { useStore } from 'zustand';
|
import { useStore } from 'zustand';
|
||||||
import { shallow } from 'zustand/shallow';
|
import { shallow } from 'zustand/shallow';
|
||||||
|
@ -58,6 +58,8 @@ export function LoadingCard(props: LoadingCardProps) {
|
||||||
}
|
}
|
||||||
}, [ready.status, getStatus(ready.data), getProgress(ready.data)]);
|
}, [ready.status, getStatus(ready.data), getProgress(ready.data)]);
|
||||||
|
|
||||||
|
const status = useMemo(() => getStatus(ready.data), [ready.data]);
|
||||||
|
|
||||||
return <Card sx={{ maxWidth: params.width.default }}>
|
return <Card sx={{ maxWidth: params.width.default }}>
|
||||||
<CardContent sx={{ height: params.height.default }}>
|
<CardContent sx={{ height: params.height.default }}>
|
||||||
<Box sx={{
|
<Box sx={{
|
||||||
|
@ -72,7 +74,11 @@ export function LoadingCard(props: LoadingCardProps) {
|
||||||
sx={{ alignItems: 'center' }}
|
sx={{ alignItems: 'center' }}
|
||||||
>
|
>
|
||||||
{renderProgress()}
|
{renderProgress()}
|
||||||
<Typography>{t('loading.progress', selectStatus(ready.data, image))}</Typography>
|
{
|
||||||
|
status === JobStatus.PENDING ?
|
||||||
|
<Typography>{t('loading.queue', getQueue(ready.data))}</Typography> :
|
||||||
|
<Typography>{t('loading.progress', selectStatus(ready.data, image))}</Typography>
|
||||||
|
}
|
||||||
<Button onClick={() => cancel.mutate()}>{t('loading.cancel')}</Button>
|
<Button onClick={() => cancel.mutate()}>{t('loading.cancel')}</Button>
|
||||||
</Stack>
|
</Stack>
|
||||||
</Box>
|
</Box>
|
||||||
|
@ -138,3 +144,14 @@ function getStatus(data: Maybe<Array<JobResponse>>) {
|
||||||
|
|
||||||
return JobStatus.PENDING;
|
return JobStatus.PENDING;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getQueue(data: Maybe<Array<JobResponse>>) {
|
||||||
|
if (doesExist(data) && data[0].status === JobStatus.PENDING) {
|
||||||
|
return data[0].queue;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
current: 0,
|
||||||
|
total: 0,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
|
@ -80,6 +80,7 @@ export const I18N_STRINGS_DE = {
|
||||||
loading: {
|
loading: {
|
||||||
cancel: 'Stornieren',
|
cancel: 'Stornieren',
|
||||||
progress: '{{current}} von {{total}} Schritten',
|
progress: '{{current}} von {{total}} Schritten',
|
||||||
|
queue: '',
|
||||||
server: 'Verbindung zum Server...',
|
server: 'Verbindung zum Server...',
|
||||||
unknown: 'vielen',
|
unknown: 'vielen',
|
||||||
},
|
},
|
||||||
|
|
|
@ -72,6 +72,7 @@ export const I18N_STRINGS_EN = {
|
||||||
loading: {
|
loading: {
|
||||||
cancel: 'Cancel',
|
cancel: 'Cancel',
|
||||||
progress: '{{steps.current}} of {{steps.total}} steps, {{tiles.current}} of {{tiles.total}} tiles, {{stages.current}} of {{stages.total}} stages',
|
progress: '{{steps.current}} of {{steps.total}} steps, {{tiles.current}} of {{tiles.total}} tiles, {{stages.current}} of {{stages.total}} stages',
|
||||||
|
queue: '{{current}} of {{total}} in queue',
|
||||||
server: 'Connecting to server...',
|
server: 'Connecting to server...',
|
||||||
unknown: 'many',
|
unknown: 'many',
|
||||||
},
|
},
|
||||||
|
|
|
@ -80,6 +80,7 @@ export const I18N_STRINGS_ES = {
|
||||||
loading: {
|
loading: {
|
||||||
cancel: 'Cancelar',
|
cancel: 'Cancelar',
|
||||||
progress: '{{current}} de {{total}} pasos',
|
progress: '{{current}} de {{total}} pasos',
|
||||||
|
queue: '',
|
||||||
server: 'Conectando al servidor...',
|
server: 'Conectando al servidor...',
|
||||||
unknown: 'muchos',
|
unknown: 'muchos',
|
||||||
},
|
},
|
||||||
|
|
|
@ -80,6 +80,7 @@ export const I18N_STRINGS_FR = {
|
||||||
loading: {
|
loading: {
|
||||||
cancel: 'Annuler',
|
cancel: 'Annuler',
|
||||||
progress: '{{current}} des {{total}} étapes',
|
progress: '{{current}} des {{total}} étapes',
|
||||||
|
queue: '',
|
||||||
server: 'Connexion au serveur...',
|
server: 'Connexion au serveur...',
|
||||||
unknown: 'nombreuses',
|
unknown: 'nombreuses',
|
||||||
},
|
},
|
||||||
|
|
|
@ -75,7 +75,8 @@ export interface CancelledJobResponse extends BaseJobResponse {
|
||||||
*/
|
*/
|
||||||
export interface FailedJobResponse extends BaseJobResponse {
|
export interface FailedJobResponse extends BaseJobResponse {
|
||||||
status: JobStatus.FAILED;
|
status: JobStatus.FAILED;
|
||||||
error: string;
|
|
||||||
|
error?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -83,6 +84,7 @@ export interface FailedJobResponse extends BaseJobResponse {
|
||||||
*/
|
*/
|
||||||
export interface PendingJobResponse extends BaseJobResponse {
|
export interface PendingJobResponse extends BaseJobResponse {
|
||||||
status: JobStatus.PENDING;
|
status: JobStatus.PENDING;
|
||||||
|
|
||||||
queue: Progress;
|
queue: Progress;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue