add queue status to UI

gui/src/components/card/ErrorCard.tsx

@@ -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 function getImageErrorReason(image: FailedJobResponse | UnknownJobResponse) {
   if (image.status === JobStatus.FAILED) {
     const error = image.error;
-    if (doesExist(error) && error.startsWith(IMAGE_ERROR)) {
+    if (doesExist(error) && error.startsWith(ANY_ERROR)) {
       return error;
     }
 
-    return `${IMAGE_ERROR}.${error}`;
+    return `${IMAGE_ERROR}${error}`;
   }
 
   return UNKNOWN_ERROR;

gui/src/components/card/LoadingCard.tsx

@@ -3,7 +3,7 @@ import { Box, Button, Card, CardContent, CircularProgress, Typography } from '@m
 import { Stack } from '@mui/system';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import * as React from 'react';
-import { useContext, useEffect } from 'react';
+import { useContext, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useStore } from 'zustand';
 import { shallow } from 'zustand/shallow';
@@ -58,6 +58,8 @@ export function LoadingCard(props: LoadingCardProps) {
     }
   }, [ready.status, getStatus(ready.data), getProgress(ready.data)]);
 
+  const status = useMemo(() => getStatus(ready.data), [ready.data]);
+
   return <Card sx={{ maxWidth: params.width.default }}>
     <CardContent sx={{ height: params.height.default }}>
       <Box sx={{
@@ -72,7 +74,11 @@ export function LoadingCard(props: LoadingCardProps) {
           sx={{ alignItems: 'center' }}
         >
           {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>
         </Stack>
       </Box>
@@ -138,3 +144,14 @@ function getStatus(data: Maybe<Array<JobResponse>>) {
 
   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,
+  };
+}

gui/src/strings/de.ts

@@ -80,6 +80,7 @@ export const I18N_STRINGS_DE = {
       loading: {
         cancel: 'Stornieren',
         progress: '{{current}} von {{total}} Schritten',
+        queue: '',
         server: 'Verbindung zum Server...',
         unknown: 'vielen',
       },

gui/src/strings/en.ts

@@ -72,6 +72,7 @@ export const I18N_STRINGS_EN = {
       loading: {
         cancel: 'Cancel',
         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...',
         unknown: 'many',
       },

gui/src/strings/es.ts

@@ -80,6 +80,7 @@ export const I18N_STRINGS_ES = {
       loading: {
         cancel: 'Cancelar',
         progress: '{{current}} de {{total}} pasos',
+        queue: '',
         server: 'Conectando al servidor...',
         unknown: 'muchos',
       },

gui/src/strings/fr.ts

@@ -80,6 +80,7 @@ export const I18N_STRINGS_FR = {
       loading: {
         cancel: 'Annuler',
         progress: '{{current}} des {{total}} étapes',
+        queue: '',
         server: 'Connexion au serveur...',
         unknown: 'nombreuses',
       },

gui/src/types/api-v2.ts

@@ -75,7 +75,8 @@ export interface CancelledJobResponse extends BaseJobResponse {
  */
 export interface FailedJobResponse extends BaseJobResponse {
   status: JobStatus.FAILED;
-  error: string;
+
+  error?: string;
 }
 
 /**
@@ -83,6 +84,7 @@ export interface FailedJobResponse extends BaseJobResponse {
  */
 export interface PendingJobResponse extends BaseJobResponse {
   status: JobStatus.PENDING;
+
   queue: Progress;
 }