UI and screen flow

1. Site map

Each page has its own address, and names travel in the query string (/queue?project=shop&queue=orders). The signed-out pages are one card in the middle of the screen. Every signed-in page has the same frame: the top bar, the navigation on the left and the page. Nothing is offered that the API does not allow: a page shows a button only when its action is in the answer's allowedActions.

The site map as a list

• Signed out
  • Sign in, /: Sign in with Google (shown while it is set up), Sign in with a passkey (when the browser can use one), Sign in as the break-glass admin. Someone signed in already goes on to /dashboard.
  • Accept your invitation, /invite?token=: from the invitation mail; Accept with Google.
  • Admin sign-in, /break-glass: email, password and code; the first time, the two-step setup and the backup codes.
    • Forgot password, /forgot: Send the link.
    • Set a new password, /reset?token=: from the mailed link; then Sign in, back to /break-glass.
  • Unsubscribe, /unsubscribe?token=: from the daily summary mail.
• Signed in: the frame of every page
  • Top bar: Cloud Console (to the dashboard), the project picker, the theme menu, the person menu (Your account, Sign out, Sign out on every device).
  • Navigation: Dashboard, Projects, Usage; with a project chosen, Cloud Tasks, Cloud Scheduler and Project settings; then Admin.
• Console
  • Dashboard, /dashboard: its rows link to a queue or a job.
  • Projects, /projects: a project's name opens its Queues.
  • Usage, /usage.
• Cloud Tasks
  • Queues, /queues?project=
    • Create queue (or Edit), /queue-edit?project=: Create or Save goes to the queue's page.
    • Queue, /queue?project=&queue=: tabs Metrics, Logs, Tasks, Configuration and Failed.
      • Create a task, /task-new?project=&queue=: Create goes to the new task's page; From a file stays on the page.
      • Task, /task?project=&queue=&task=.
• Cloud Scheduler
  • Jobs, /jobs?project=
    • Create a job (or Copy, or Edit), /job-edit?project=: three steps; Create or Save goes to the job's page.
    • Job, /job?project=&job=: tabs Logs, Results (a check only) and Configuration.
• Project settings: API keys /keys, Secrets /secrets, Alerts /alerts, Export and import /settings-file, each with ?project=.
• Admin: People /users, Audit log /audit.
• Your account, /account.

What the frame offers, and when

A project page opened without a project says “Choose a project” (“Pick a project at the top, or from the list.”) and lists the projects. One the person may not see says “No such project” (“That project does not exist, or you have no access to it.”). A signed-in page whose GET /api/me answers 401 goes to /.

2. Screen by screen

The paths people take most, one screen after another. Each arrow names what moves the person on. The table under each path says who may do it: a permission in the project (read, create, update, pause, run, delete, keys, secrets), or an admin (admins may do everything). The console shows a control only when the API allows it, and the API checks again.

3. Decision points

Where the console goes one way or another, and the words it shows. Every decision is the API's; the page shows its answer as it is. Green ends well, red is refused, amber is a step or a partial answer.

3.2 The break-glass sign-in

Sign in: email, password and code togetherPOST /auth/local

• Wrong password, wrong code, unknown email, or locked

  One message for every reason (401)“Wrong email, password or code”

  At the top of the form. It tells nothing away: a locked account reads the same.

• Right password, no authenticator yet

  The first timeNo session yet: the two-step setup below. Code is left empty the first time.

• Right password and code

  In/dashboard. A code from the app, or a backup code.

The first time, in the same card:

1. Set up two-step sign-inScan the QR code, or enter the setup key, or open the setup link.
2. Enter the 6-digit code, then Turn on two-step sign-inPOST /auth/local/enrol
   “Wrong code: enter the code your authenticator shows now”. Locked: “Locked after too many wrong tries; try again in 15 minutes”. Too late: “The enrolment has expired; sign in again”.
3. Two-step sign-in is on: the backup codes, onceCopy all, or Download .txt. “Keep these somewhere safe. Each one works once, in place of a code, and you will not see them again.”
   Leaving the page closes the setup: “Sign in again”.
4. Tick “I have saved these codes”, then Continue to the consoleContinue stays disabled until the box is ticked.
   In: /dashboard.

3.3 Create a task

Create, on Create a taskPOST …/queues/{q}/tasks; the button is busy until the answer

• 201

  The task's pageWith a notice, said once: “Created the task order-2001.”

• 400

  Field messagesEach beside its input, which is marked and gets the focus, such as “url is required: an http:// or https:// URL” or “scheduleTime is at most 30 days ahead”. A message with no input of its own goes under “Check these:” at the top.

• 409

  The name is remembered“A task named order-1001 is in this queue, or succeeded or was deleted within the last day”, at the top of the form; what was typed stays.

• 429

  Quota“The project's daily quota of 5000 tasks and job runs is used up”, or while the console is held “The console is over a free-plan limit today; new tasks are refused until … UTC”.

3.6 A destructive action

The confirm dialogPurge, Delete, Revoke, Remove, Hold dispatch

• Cancel, or Escape

  Nothing is sentThe dialog closes and the focus goes back to the control that opened it.

• Delete (the action's own word)

  SentThe control is busy until the answer. Then a green notice (“Deleted emails.”) and the list drawn again, or a red notice with the refusal.

The questions the console asks

Action	Question	Button	What it says
Purge a queue	“Purge orders?”	Purge	“Every queued task is deleted. Running tasks finish.”
Delete a queue	“Delete emails?”	Delete	“The queue and its tasks are deleted. This cannot be undone.”
Delete a task, or the ticked tasks	“Delete order-1001?” or “Delete 3 tasks?”	Delete	The ticked tasks' names (none for one task from its menu)
Delete all failed tasks	“Delete every failed task?”	Delete all	“Their logs stay until they are pruned.”
Delete a job	“Delete nightly-report?”	Delete	“The job and its run history are deleted. This cannot be undone.”
Revoke an API key	“Revoke shop-app?”	Revoke	“Apps using this key are refused from now on. This cannot be undone.”
Delete a secret	“Delete the secret webhook-signing?”	Delete	“Calls that name it fail as auth from now on.”
Remove a person	“Remove” and their name	Remove	“They are signed out and lose every grant. The audit log keeps their name.”
Cancel an invitation	“Cancel the invitation to” and the address	Cancel invitation	“Its link stops working.”
Remove a passkey	“Remove” and its name	Remove	“It will no longer sign you in. Remove it from the device too.”
Hold a project's dispatch	“Hold dispatch for shop?”	Hold dispatch	“No task is sent and no job runs until it is resumed; new tasks are still accepted and wait.”

4. Component states

Each picture is a detail of the real console at its own size, cropped to the part that shows the state. The pictures are in the light theme.

Then each component, state by state: what the console does. A dash means the state does not arise for it.

Button

Link button

Row menu

Tab

Form field

File chooser

Table row

Notice

Dialog