Hook up jobs with BE #191

annavik · 2023-07-07T10:45:04Z

Some notes:

We render stages dynamically. It means stage list can have any size.
We render stage params dynamically. It means param list can have any size.
Some params are still missing value (see comments).
The job status and job progress is made up, but easy to replace with BE values (see comments).
We refetch both jobs and job details every 10 second. We show a loading text in UI when this happens.

Screenshots:

netlify · 2023-07-07T10:45:08Z

✅ Deploy Preview for ami-web ready!

Name	Link
🔨 Latest commit	`cb6a39e`
🔍 Latest deploy log	https://app.netlify.com/sites/ami-web/deploys/64a875b61d79180008b28bf4
😎 Deploy Preview	https://deploy-preview-191--ami-web.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

annavik · 2023-07-07T10:46:16Z

ui/src/data-services/hooks/jobs/constants.ts

@@ -0,0 +1,2 @@
+export const COLLECTION = 'jobs'
+export const REFETCH_INTERVAL = 10000 // Refetch every 10 second


@mihow here is the polling configured for jobs, you can tweak this value or set to undefined :)

netlify · 2023-07-07T10:46:50Z

✅ Deploy Preview for ami-storybook ready!

Name	Link
🔨 Latest commit	`cb6a39e`
🔍 Latest deploy log	https://app.netlify.com/sites/ami-storybook/deploys/64a875b676b87e000897d6fb
😎 Deploy Preview	https://deploy-preview-191--ami-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

annavik · 2023-07-07T10:47:04Z

ui/src/data-services/hooks/useStatus.ts


 const COLLECTION = 'status/summary'
-const REFETCH_INTERVAL = undefined // TODO: Refetch every 10 second
+const REFETCH_INTERVAL = 10000 // Refetch every 10 second


Also added polling for status (numbers in header).

annavik · 2023-07-07T10:47:56Z

ui/src/data-services/hooks/useStatus.ts

        .get<ServerStatus>(fetchUrl)
        .then((res) => convertServerRecord(res.data)),
    refetchInterval: REFETCH_INTERVAL,
-    retry: 0,


I skipped fetch retry while status endpoint was gone. Adding back!

annavik · 2023-07-07T10:49:27Z

ui/src/data-services/models/job.ts


  get statusDetails(): string {
-    return 'More details about the job status.'
+    // TODO: Return BE value here when available.


BE could perhaps return something here? This label will show up here:

annavik · 2023-07-07T10:50:44Z

ui/src/data-services/models/job.ts

+
+  get statusValue(): number {
+    // TODO: Return BE value here when available (number between 0 and 1).
+    switch (this.status) {


Mocked a value based on status for now. This value will control status bar size:

I added a summary section to the progress JSON with the overall progress & status

annavik · 2023-07-07T10:54:55Z

Project name and some params (more than shown here) are missing value in details view:

annavik · 2023-07-07T11:08:07Z

ui/src/data-services/models/job-details.ts

+
+    const name = stage.name
+    const status = this.getStatus(progress.status)
+    const statusLabel = this.getStatusLabel(status)


This status label is basic, should probably include info about time remaining, but I was not fully sure about the logic here, so skipped for now. This is the place to tweak if needed :)

I added a new "status label" to the stages progress. So status is the ENUM key with the status value. progress is the float value of the progress (from 0-1) and status_label is a formatted text string.

mihow · 2023-07-07T18:45:31Z

Project name and some params (more than shown here) are missing value in details view:

I added the missing project and some values for those params!

Also you can change the config & status JSON in the interactive HTML form now, if you want to test different values

mihow · 2023-07-07T18:56:21Z

Project name and some params (more than shown here) are missing value in details view:

Oh!! Actually there isn't meant to be a value here. The config is just the static info needed to render the form fields. The progress object contains the actual value that is updated. Use the key from the field config to lookup the value from the progress.

mihow · 2023-07-07T19:04:58Z

I guess we have two kinds of "fields" that look the same in the UI but get their values from different places

Fields that are configuration for the job before it starts (Batch size, Model choice)
Fields that show a detail about the current status of the running job

Maybe I should just remove the status fields from the config object?? Then the field name and the value with both only be in the progress object.

annavik · 2023-07-07T20:06:02Z

I guess we have two kinds of "fields" that look the same in the UI but get their values from different places

Fields that are configuration for the job before it starts (Batch size, Model choice)

Fields that show a detail about the current status of the running job

Maybe I should just remove the status fields from the config object?? Then the field name and the value with both only be in the progress object.

Oh I see! We can have as is, I just pushed a small update that will check if present in config, if not look in progress.

annavik added 6 commits July 7, 2023 10:42

Replace job example data with real data

ffd7bce

Hook up detail view with BE

a2321fe

Add polling to status and jobs

cf9ebb7

Cleanup

d50041e

Highlight active stage bullet

7bbbf55

Tweak small screen UI

17f83c4

annavik commented Jul 7, 2023

View reviewed changes

Add pagination to jobs and bump deployments page size

9bb6dd2

annavik force-pushed the web-ui-hook-up-jobs branch from c45a402 to 9bb6dd2 Compare July 7, 2023 16:58

Consider progress value in stage params

55b9669

Use backend values for status details

cb6a39e

mihow approved these changes Jul 7, 2023

View reviewed changes

mihow merged commit 4942e38 into main Jul 7, 2023

mihow deleted the web-ui-hook-up-jobs branch November 17, 2023 21:33

		@@ -0,0 +1,2 @@
		export const COLLECTION = 'jobs'
		export const REFETCH_INTERVAL = 10000 // Refetch every 10 second

Hook up jobs with BE #191

Hook up jobs with BE #191

Uh oh!

Conversation

annavik commented Jul 7, 2023

Some notes:

Screenshots:

Uh oh!

netlify bot commented Jul 7, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for ami-web ready!

Uh oh!

annavik Jul 7, 2023

Choose a reason for hiding this comment

Uh oh!

netlify bot commented Jul 7, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for ami-storybook ready!

Uh oh!

annavik Jul 7, 2023

Choose a reason for hiding this comment

Uh oh!

annavik Jul 7, 2023

Choose a reason for hiding this comment

Uh oh!

annavik Jul 7, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

annavik Jul 7, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mihow Jul 7, 2023

Choose a reason for hiding this comment

Uh oh!

annavik commented Jul 7, 2023

Uh oh!

annavik Jul 7, 2023

Choose a reason for hiding this comment

Uh oh!

mihow Jul 7, 2023

Choose a reason for hiding this comment

Uh oh!

mihow commented Jul 7, 2023

Uh oh!

mihow commented Jul 7, 2023

Uh oh!

mihow commented Jul 7, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

annavik commented Jul 7, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

netlify bot commented Jul 7, 2023 •

edited

Loading

netlify bot commented Jul 7, 2023 •

edited

Loading

annavik Jul 7, 2023 •

edited

Loading

annavik Jul 7, 2023 •

edited

Loading

mihow commented Jul 7, 2023 •

edited

Loading