Why
Increase our test coverage and give us increased confidence in the auth0 store

What

• Test for state
• Test getters
• Test mutations
• Test actions

Notes
Sub issue of #101
Much of the work for this is done in the cloud-web-ui repo but will need significant updating

Description

With a new install of Prefect server (0.12.5), Firefox (78.0.2, Linux) displays "Attempting to connect..." in the API Status box. Chrome (84.0.4147.89, Linux), however, displays "Connected".

Expected Behavior

Both Firefox and Chrome to connect to the API.

Reproduction

I've attached a screenshot of Firefox, with the network tab open: this shows that the response from the API is 200 even though the API Status box displays "Attempting to connect...".

Environment

Here's the output of prefect diagnostics.

{
  "config_overrides": {},
  "env_vars": [],
  "system_information": {
    "platform": "Linux-5.4.0-40-generic-x86_64-with-glibc2.29",
    "prefect_version": "0.12.5",
    "python_version": "3.8.2"
  }
}

Why

Since a user can sign into Cloud with a UI server, we want to make it clear that changes to an account (including payment) while working against Cloud will result in charges and are real account changes

What

• a banner exists on the Account page that warns users that account changes are real and charges will be applied if they add additional users/concurrency etc.

Notes

Why
Increase our test coverage and give us increased confidence in the refresh and sidenav stores. (Putting these two together as one issue as simpler stores with no actions).

What

• Test for state
• Test getters
• Test mutations

Notes
Sub issue of #101
Most work done already in cloud-web-ui repo

Current behavior

Currently it's pretty much impossible to put Prefect UI container behind proxy and make it serve under "/some/other/path" but not root "/".

Proposed behavior

It would be great to implement either of options:

1. Pass env var (e.g. PROXY_ADDRESS_FORWARDING) that will respect all incoming X-Forwarding-* headers and adjust behaviour.
2. Pass env var (e.g. BASE_URL) to communicate to the static app it's not in the root path.

Why
The current errors tile query times out and the tile shows no errors. This can be confusing when a flow actually has got errors.

What
Minimum:

• Add error handling to the error query so that the tile can show an error message or loading state when the query times out.

Better:
Refactor the query to a more robust query such as task failures.

• [ ]

Notes

Why

There are a few components that still contain references to the old toasted component, which no longer exists. These should be updated to use the alert Vuex store instead.

What

• references to toasted are updated to use the new alert store

Notes

Description

Activity filter "by type" does not work.

Expected Behavior

Set filter to SCHEDULED and only schedules shoult be shown…

Environment

Prefect v0.12.5 in Server Mode with LocalEnvironment and small Dask cluster.

Why
Increase our test coverage and give us increased confidence in the license store

What

• Test for state
• Test getters
• Test mutations
• Test actions

Notes
Sub issue of #101
Some work done in the cloud-web-ui but will need updating

Why
We want to make sure users can sign up without issues. Eventually this will be covered by new E2E tests but it would be good to have a shorter, more specific set of unit tests on the methods in the sign up pages.
What
Test that:
Users can access the buttons and screens to make the correct API calls
Buttons and screens are in the correct state (active/disabled) depending on user status (e.g. authorized/authenticated/tenant etc) /API responses

• [ ]

Notes

When running the UI with Prefect Server, the tenant-level views show all flows/projects/flow runs/etc..., regardless of which tenant is selected. We should update the UI queries to filter based on the current tenant page being viewed, rather than relying on hasura to implicitly do this filtering.

Why
Increase our test coverage and give us increased confidence in the api store

What

• Test for state
• Test getters
• Test mutations
• Test actions
• Add type checks to the store for backend choices

Notes
Sub issue of #101

Bug Description

Sometimes the auth state is mismatched (invalid) when redirecting from Auth0. This is surfaced with a blank screen, which is a bad user experience

Steps To Reproduce

1. Start the UI server, then switch to Cloud

Browsers Tested:

• Chrome
• Firefox
• Safari
• Edge
• IE

Notes

Stacktrace:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in created hook (Promise/async): "Error: Invalid state"

found in

---> <App> at src/App.vue
       <Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1884
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
eval @ vue.runtime.esm.js?2b0e:1856
Promise.catch (async)
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1856
callHook @ vue.runtime.esm.js?2b0e:4219
Vue._init @ vue.runtime.esm.js?2b0e:5008
VueComponent @ vue.runtime.esm.js?2b0e:5154
createComponentInstanceForVnode @ vue.runtime.esm.js?2b0e:3283
init @ vue.runtime.esm.js?2b0e:3114
createComponent @ vue.runtime.esm.js?2b0e:5978
createElm @ vue.runtime.esm.js?2b0e:5925
patch @ vue.runtime.esm.js?2b0e:6516
Vue._update @ vue.runtime.esm.js?2b0e:3945
updateComponent @ vue.runtime.esm.js?2b0e:4060
get @ vue.runtime.esm.js?2b0e:4479
Watcher @ vue.runtime.esm.js?2b0e:4468
mountComponent @ vue.runtime.esm.js?2b0e:4073
Vue.$mount @ vue.runtime.esm.js?2b0e:8415
eval @ main.js?56d7:147
./src/main.js @ app~._m.js:2745
__webpack_require__ @ app~._m.js:854
fn @ app~._m.js:151
1 @ app~._m.js:3045
__webpack_require__ @ app~._m.js:854
checkDeferredModules @ app~._m.js:46
(anonymous) @ app~._m.js:994
(anonymous) @ app~._m.js:997
vue.runtime.esm.js?2b0e:1888 Error: Invalid state
    at eval (auth0-spa-js.production.esm.js?9767:15)
    at eval (auth0-spa-js.production.esm.js?9767:15)
    at Object.eval [as next] (auth0-spa-js.production.esm.js?9767:15)
    at eval (auth0-spa-js.production.esm.js?9767:15)
    at new Promise (<anonymous>)
    at o (auth0-spa-js.production.esm.js?9767:15)
    at e.handleRedirectCallback (auth0-spa-js.production.esm.js?9767:15)
    at _callee2$ (index.js?0dd8:226)
    at tryCatch (runtime.js?96cf:63)
    at Generator.invoke [as _invoke] (runtime.js?96cf:293)

Why
Increase our test coverage and give us increased confidence in the user store

What

• Test for state
• Test getters
• Test mutations
• Test actions

Notes
Sub issue of #101
Some work done in cloud-web-ui but will need updates

Bug Description

Unable to create a new project from the 'Running a Flow' tutorial in the Cloud UI. When prompted to create a new Project, add a Name, and add a description, the Submit button does not proceed to Step 2. This can be rectified by choosing an existing project and pressing Submit to proceed through the tutorial, however this is a hard stop for new users.

Steps To Reproduce

1. Select Tutorials from the Hamburger menu
2. Select Running a Flow
3. Try to create a new project from the dropdown menu

Browsers Tested:

• Chrome
• Firefox
• Safari
• Edge
• IE

Notes

Why

The Gantt Chart is a really useful feature for understanding mapping and parallelism; the current Gantt chart is limited visually from displaying these correctly due to its lack of flexibility. In addition, the library it relies on (apexcharts) is the large package in our bundle. Removing that package by redesigning the chart in D3 will allow us to completely remove that package.

What

• the current gantt chart is replaced with a d3 version
• a user can easily see mapped task runs in the chart, and can understand their parent task run
• a user can easily see task run parallelism
• a user can interact with individual runs ( to visit the corresponding task run pages etc )
• the chart is extendable and flexible to handle other use cases

Notes

Bug Description

Project creation fails silently.

Steps To Reproduce

1. Pull fresh 0.13.1 images
2. Visit the Server dashboard
3. Attempt to create a project using the project selector in the top right corner

Browsers Tested:

• Chrome
• Firefox
• Safari
• Edge
• IE

Notes

Why
We need to create a new CI Pipeline for the deployment and this is a good opportunity to put Prefect CI to good use!

What

• dev deployments are automated

The flow run duration differs between the flow run page and the runs page. This may be due to some calculation happening client side.

e.g.

Flow run page (5s):

Runs page (4s):

Another related example where a really fast run not showing the duration at all on the runs page:

Flow run page (<1s):

Runs page (no duration):

Why

Server deployments of LogRocket are leading to a lot of noise in bug reporting.

What

• the LogRocket client is not initialized in a Server deployment
• switching to Cloud does initialize a new LogRocket client

Notes

Why

There's no way to update the default Server url for all users; if the location of the API changes, anyone who visits the UI needs to update the endpoint manually via the Home page. In the previous version of Server we provided a ~/.prefect/config.toml-level variable, server.ui.graphql_url, which ran a small bash script to replace the interpolated endpoint in the built application. The previous solution wasn't ideal because it looked for a specific string (localhost:4200/graphql) to replace, meaning the UI images would need to be re-pulled to change the endpoint more than once. A new solution shouldn't have this problem.

What

• someone deploying the UI can set an environment variable to change the default server_url endpoint
• setting this environment variable will change the default for any users who are served the built application

Notes

Here's the previous script we used:

  
#!/usr/bin/env bash


if [ "$PREFECT_SERVER__GRAPHQL_URL" != 'http://localhost:4200/graphql' ]
then
    echo "Replacing graphql references with: $PREFECT_SERVER__GRAPHQL_URL"
    for i in /var/www/js/*.js; do
        echo $i
        sed -i -e "s,http://localhost:4200/graphql,$PREFECT_SERVER__GRAPHQL_URL,g" $i
    done
fi

echo "👾👾👾 UI running at localhost:8080 👾👾👾"

nginx -g "daemon off;"

where is the flow_id? I can't find it!!!

Bug Description

Since the flows and agents tiles/tabs are outside the landing loading, the components aren't receiving the apollo client refreshes they should be; this means the component's queries are being stopped but never restarted to fetch new data.

Steps To Reproduce

1. Navigate to the Dashboard > Flow tab
2. Switch backends

Browsers Tested:

• Chrome
• Firefox
• Safari
• Edge
• IE

Notes

Description

The prefect ui docker image has links to fonts from the internet, and if you start the server without internet connection, the UI will be corrupted.

Solution: download the fonts manually and copy them to the container. Tested on version 0.12.6
https://easyupload.io/ofkue2

Current behavior

The order that flow parameters appear in the Ui seems a) to be arbitrary and b) may change on flow registration. This has a couple of drawbacks:

• Sometimes there is a logical ordering to the parameters- e.g. it makes sense that a "start" parameter should come before an "end" parameter.
• Flow parameter order jumping around can mean it's easy to mistake one parameter for another.

Proposed behavior

• Allow the user to define the order of parameters- maybe the easiest thing here is to have them show up here in the same order they are defined in the flow.
• If the above is not possible for any reason then ensure that the ordering is well defined and does not change on flow registration. One option here is to have the order be alphabetical.

Example

I have three parameters, start, end and environment. If this proposal is implemented I can ensure that the ui will always present them in this order, which makes it easier for someone scheduling a flow to fill in the parameters correctly.

Bug Description

As shown here, the task failures tile shows a red bar even if there are no errors. This was seen on https://cloud.prefect.io/prefect/flow/f4a3942d-b174-4ca1-a009-4ff35dfaf3f0?version=2.

Browsers Tested:

• Chrome
• Firefox
• Safari
• Edge
• IE

Notes

Why

The gantt chart isn't currently available and should be reintroduced to assure parity with Cloud.

What

• the vue-apexcharts component is added to the repo
• a user can view the gantt chart on the flow run page

Notes

This is different from #33, where we'll overhaul the chart entirely

Bug Description

I followed the steps as given in the README markdown file. After the 'npm run serve' step, the command prompt displays that "'export' is not recognized as internal or external command, operable program or batch file."

After searching on the internet about this error, I read that 'export' does not work on Windows OS (which I use), rather have to use 'set' . In which file do the changes have to made?

Steps To Reproduce

{Have followed the steps as written on the REAME.md file}

Browsers Tested:

• Chrome
• Firefox
• Safari
• Edge
• IE

Notes

Screenshot of the command prompt:

Why

When a task is mapped, it would be useful to see a waterfall view of all its mapped children.

What

• when visiting the task run page for a mapped parent task, a user can view a Gantt chart which describes all mapped children

Notes

Why
Increase our test coverage and give us increased confidence in the auth nav guard/middleware

What

• Test all possible types of from routes
• Test all possible types of to routes
• Test all possible authentication types

Notes
Sub issue of #101
Some tests and template/examples in cloud-web-ui

Why

Right now when you scroll around on the logs screen, it always jumps back to the bottom every few seconds. This is because the logs page by default is in "live" mode. This can be toggled in the bottom right corner. This can be very disruptive, especially if you didn't realize that "Live" was a button that toggles this behavior.

What

• Whenever a user scrolls up the logs tile, "Live" mode should temporarily be toggled to off. If the user then scrolls back to the very bottom, it should then be turned back on - all automatically.

Notes

Why
Cancelling is a Running state so will affect flow run concurrency. If we don't check for it for runs in progress then it can be confusing to users.

What

• A user can see in the dashboard if they have any flow runs in a running state - includes cancelling
• For consideration: include a cancelling tab on the runs in progress tile or just include cancelling runs as part of the running tab

Notes

Bug Description

^ This log is from February 14, 2020, at 7:02 PM ET - but the displayed timestamp makes it look like 7AM on an unknown day. The actual timestamp is 2020-02-15 00:02:13.916259+00 for log id 8c807c81-cdf5-46ea-a8b5-7ee265e33356: https://cloud.prefect.io/prefect/flow-run/cdb29550-93f0-40f3-8bbf-a61b3d6031af?logId=8c807c81-cdf5-46ea-a8b5-7ee265e33356

Even the mouseover shows a 12 hour clock with no AM or PM:

It would be great to show these as 24-hour clocks, possibly with a date (at least, if in the past)

Why

It has no highlighting! Highlighting is really helpful for JSON, since it's finicky and easy to miss a bracket/double quote.

What

• input to the JsonInput component is highlighted and validates input by way of highlighting

Notes

Description

Currently restarting a failed flow that has failed on some mapped tasks seems wrong in the following ways:

1. Previously successful mapped childs will re-run
2. run_count doesn't seem to change between restarts

Expected Behavior

1. A previously successful mapped task should not be rerun by checkpointing if it has already succeeded
2. the run_count should up between runs.

Reproduction

Here is a minimal flow that can reproduce this is below. Start a cloud run, it will fail on the first mapped task, but the other two will succeed. Use the 'restart' button in the top right of the UI to restart this flow-run. Note that previously successful mapped runs run again. Note that the first instance fails again, and (in the logs) run_count is still 1, even though the UI clearly shows multiple runs.

import prefect

@prefect.task
def task(x):
    prefect.context.get('logger').info(f'x = {x} and run_count = {prefect.context.get("task_run_count")}')
    if x == 0 and prefect.context.get('task_run_count') == 1:
        raise prefect.engine.signals.FAIL('fail on first attempt')
    else:
        return x + 1

@prefect.task
def summy(xs):
    return sum(xs)

with prefect.Flow('test-restarts') as flow:
    list = prefect.tasks.core.constants.Constant([0,1,2])

    mapped = task.map(list)

    summy(mapped)

flow.register(project_name='mattk')

Environment

root@docker-desktop:/workspaces/prefect# prefect diagnostics
{
  "config_overrides": {},
  "env_vars": [],
  "system_information": {
    "platform": "Linux-4.19.104-microsoft-standard-x86_64-with-debian-10.5",
    "prefect_version": "0.13.2",
    "python_version": "3.7.9"
  }
}

Bug Description

The selection bar (if that's what you call this) creeps over under Flows on the dashboard:

Steps To Reproduce

prefect server start -v alpha

Visit localhost:8080

Clicking on to the flows page resets the width:

Browsers Tested:

• Chrome
• Firefox
• Safari
• Edge
• IE

Notes

Why
Increase our test coverage and give us increased confidence in the prefect-auth nav guard/middleware

What

• Test all possible types of from routes
• Test all possible types of to routes
• Test all possible prefect authorization types

Notes
Sub issue of #101
Some tests and template/examples in cloud-web-ui

Why

The failures tile error design doesn't match the current implementation of other tiles (though the error itself is good).

What

• the structure of the card component isn't fundamentally altered when the tile is in an error state

Notes

Bug Description

The details tile on the Task Run page isn't displaying in certain cases.

Steps To Reproduce

1. Go to the Task Run page

Browsers Tested:

• Chrome
• Firefox
• Safari
• Edge
• IE

Notes

Why

The sidebar has been removed but there are still a few references.

What

• references to the sidebar are removed
• anywhere the sidebar was needed is replaced with a similar menu or tooltip component

Notes

What and Why
I find myself experimenting a lot in the UI to test features, etc. in doing so, I sometimes want to manually place runs into various states (e.g., Scheduled or Pending) but the drop down lists in the UI don't always allow me to do so. In that case I find myself having to go back and forth from the GraphQL API - it would be nice if the UI didn't place any restrictions on the types of states I could set.

Why
Increase our test coverage and give us increased confidence in the flow nav guard/middleware

What

• Test all possible types of from routes
• Test all possible types of to routes
• Test all possible flow types

Notes
Sub issue of #101
No tests in cloud-web-ui but that still has good examples of middleware unit tests

Why
Increase our test coverage by adding unit tests for all store and middleware/navguards

What
For each store:

• Add tests that check that each correct returns correctly in each of its different states
• Test each mutation returns correctly for each of its different states
  For each navguard:
• Test that the navguard routes correctly for each condition (e.g. when a license is present or not)

Notes
Tests in the cloud-web-ui repo provide a good template for the tests required.

We don't plan on fully supporting Windows development for the UI (which we should state clearly in the README), but we can document the requirements and even provide a docker compose file that allows you to develop within a pre-made node-based Docker image on a Windows machine.

Why

A READMEs will help new users get acquainted with the repo and set up their JavaScript dev environments!

What

• a README exists in the root directory
  • the README goes through a step-by-step process of setting up the JavaScript development environment
  • the README explains the server setup and development commands
  • the README details the required environment variables

Notes

Why

A common workflow I find is to run the same thing again, with the same parameters, but on a new version (if I've registered a new version) or with a slight tweak to parameters. Currently this involves going to a previous run, copy-pasting the parameters (and context if present), going back to the main flow page, hitting the 'run' button, checking that the selected version is either 'all' or the latest one, and then pasting the parameters and hitting run.

What

• Under the information tile in the top left of the flow run page, add a new button 'Run Again...'
• This button should open the Flow page, on the Run tab, with the parameters and context from the previous run pre-loaded into the text boxes.

Notes

The version drop-down should match the one it was run with for completeness, but I'd also accept it being set to latest.

Why
A common cause of late/not picked up runs is a label mismatch between a flow and available agents. The UI could check a flow's labels and make sure they are compatible with a running agent. The late run tile could have an icon that shows a label mismatch/no compatible agent where relevant.

What

• Agent store with getter to show what labels currently running agents have
• Method or agent to check if flow labels are compatible Agent flow affinity and environment pages in the docs set out agent/flow label requirements
• Alert on dashboard (late runs seems the best location - possibly with crossed out agent icon?) if a flow can't be picked up
• Alert on the flow page connected to the labels section of the flow details tile

Notes
Something like the ban symbol over the agent icon could be a good icon for the late runs tile?

Why
Increase our test coverage and give us increased confidence in the tenant guard/middleware

What

• Test all possible types of from routes
• Test all possible types of to routes
• Test all possible tenant types and roles

Notes
Sub issue of #101
Some tests and template/examples in cloud-web-ui

Why
Increase our test coverage and give us increased confidence in the tenant store

What

• Test for state
• Test getters
• Test mutations
• Test actions

Notes
Sub issue of #101
Some work done in cloud-web-ui but will need updates