In the main page, I can't select any project using Safari browser. If I click in the project title, It just don't do nothing.
That was tested in desktop view with Safari v16.0, in macOS Monterrey v12.6

At present the tables are not tables, they are a complex series of <div>s. This means that each and every row is potentially out of alignment.

Take this

Can we please either use HTML tables, or form some other way to get vertical alignment on all rows?

After discussion at Doghouse, the suggestion was that, as the project list grows, it'll become more difficult to find things. Suggestions included:

• Represent projects as cards so that more can fit onto the screen at a time
• Represent projects as a table (presumably in a smaller font) so that more fit onto the screen at a time

Obviously the idea was that these were alternative settings, not a replacement for the existing setup.
Not the most pressing problem at the moment, but I thought we should relay it to you guys as feedback.

It could be good to support more languages, especially for non-English speaking teams.

We should figure out a few things first:

• What do we need for a first-version?
  • Perhaps just the Lagoon UI to support translations?
  • Translating the documentation would be a quick-win but can be hard to keep up-to-date. We would need to flag outdated translations somehow.
• How do we want to achieve this? Should the preferred language be project-based, "customer-level" based, or individual user based?
• Who is able to provide translate support?

Seen after the 2.10.0 upgrade

There are routes defined in the .lagoon.yml file for this environment FWIW.

The UI doesn't always update or refresh properly when clicking buttons like "add task" or "new deployment" and this can lead to users clicking buttons twice because the first time didn't see a positive reaction.

The result of clicking buttons twice can result in multiple tasks or deployments being triggered.

I'm not sure if this is related to subscriptions in the API/UI getting exhausted (uselagoon/lagoon#1344). Could we just have the button actions in the UI force reload pages instead?

Additonally, if there is an error returned, exposing the error in a nice way so users don't have to dig through network tabs or console logs.

Now that we have the collapsible log parts (which is awesome btw) we lost the possibility to view and/or downloads the full logs of a build. In some cases this might be interesting (to search for an error, for example).

Could we add a "un-collapse all" button somewhere to un-collapse every log to be able to search or a button to download the whole log? Preferably both of course :)

Now that uselagoon/lagoon#1775 has landed, let's make use of it. It would be great to:

• Expose in the project list, the current metadata defined, in some visual way, e.g.:

(caution, not a designer)

• Expose the metadata as something that can be filtered on in the search bar, or perhaps a dropdown next to it (i.e. facets). This way users with access to a lot of projects can narrow them down to a specific list. Being able to combo more than 1 filter would be ideal too.

Client would like to have links on the environments page to the /facts and /problems pages just below the Tasks menu on the left.

Both the project page and environment overview page use the same markup for the details, this can probably be improved by moving markup/css into their own components

The sign-out link is not working

Browser: Chrome
OS: Pop!_OS

Video of interaction not working:
https://user-images.githubusercontent.com/383346/228636694-c8e4ca37-e3d7-4782-9315-6aecc488e7ad.mp4

Steps to reproduce:

1. View the backups page for a project with more than 10 backups (the default results limit)
2. Set the number listed to "all"
3. It comes up as "10" (well, it comes up with some error about opacity, then re-logs-me-in, then goes to 10). Doing 100 works fine though.

Since the results limit is a shared component, it's also a but on deployments and tasks pages.

All the "tables" in the environment pages have the same look/feel and share a lot of markup/css. This can probably be improved by moving common markup/css to into their own components.

It would be nice to have the accordion for the last section of the build logs to be opened by default.

The below is not super helpful, but expanding the accordion would provide some additional information

The Lagoon UI does not provide currently the editing of projects while the GraphQL API provides this. For the following fields of a project:

• gitURL
• branches regex
• Pullrequests
• production environment
• autoidle

Additionally this editing screen should only be shown when the user has the rights to update a project

Currently when a user changes the number of results to display on a page (Backups, Deployments, and Tasks), the component calls window.location with the new results which causes a full page refresh.

But we're using React which means we should be able to update the data inline.

A potential fix would be to change the ResultsLimited component that instead of having an internal onChange event, it accepts an onChange function as part of its props. Then each page that that uses the component can handle it's own state.

There is an interesting situation right now, that if a deployment takes a long time to start (which can happen for numerous reasons, e.g. there is a queue of deployments ahead of the one you put through, and QoS is in place) the deployment times can jump around.

There are 3 times that are important for a deployment

• created - the time the deployment was queued to start
• started - the time the deployment actually started
• finished - the time the deployment completed

The UI shows the difference between created and now when the deployment is not yet complete, and started and finished when complete. This can cause the deployment times to jump upon completion. This is confusing.

Perhaps it might be best to show on the deployment 2 times upon completion:

• Time spent queueing
• Time spent executing

Perhaps in some easy to understand way. For bulk deployments, time spent queueing is not that important, but for regular single deployments it is.

Allow updating your own password while signed in to lagoon UI, currently only the 'forgot password' flow is available

Have Lagoon push a deploy marker for an environment if NEW_RELIC_ENABLE is true

https://docs.newrelic.com/docs/apm/new-relic-apm/maintenance/record-monitor-deployments

When looking at #58 a direct update to git-url-parse latest version (13.1.0) wasn't possible because of webpack issues:

We should dig into this and work out how to resolve this tree properly

There are a few places in the api/ui where Lagoon stores and retrieves files. Currently these are environment backups, task files and insights. The files are retrieved directly from S3 using a signed/short-lived link, meaning no Lagoon authorization is performed once a link is generated. The current system generates a link on page load valid for 5 minutes, in order to account for time that a user might be doing other tasks in between the page load and them clicking the link.

By moving the link generation from the page load to the moment they click the link, that would allow us to shorten the time a link is valid to reduce the risk of unauthorized access.

The color of a failed deployment section has changed to blue recently, where it should be red like previous versions.

Previous:

Current:

It would be nice to have a view over all running deployments from all project the user as access to.

Especially for multisite deployments, this would be helpful to see when all sites are deployed.

The Insight count is currently static - would be nice to have this update when filtering results.

Could I please request that from the dashboard, you be able to see if configuration management is enabled

See attached example

We've added a new advanced task definition argument type ENVIRONMENT_SOURCE_NAME_EXCLUDE_SELF that is currently unsupported in the UI - and defaults to simply displaying an input text box.

The UI should display a dropdown of options, as it does with ENVIRONMENT_SOURCE_NAME.

There are multiple calls to trim in isFormValid - this can be cleaned up and replaced with regex.

It would also be beneficial to have feedback in the UI detailing why the format of the key is invalid on validation failure.

One of the advantages of next.js framework is it's "out of the box" support for server side rendering. The following are blocking SSR from happening and there may be other issues:

• Apollo client integration is not configured to do SSR querying (but this can be fixed, see next.js examples)
• Keycloak integration does not save user credentials in any way so all requests to the application require a redirect to keycloak for authentication. Need to store the creds in a way that is accessible server and client side (and still supports the current token/refresh scenarios)

As projects can have attributes - such as metadata, variables, tasks and notifications, now is the time to add a left nav to the /project page to allow easy pagination

Describe the bug

If you copy and paste whitespace before or after the project name, then the project filter will find no projects

This is annoying.

To Reproduce

Steps to reproduce the behavior:

1. Go to the projects page
2. Type project
3. Notice how it finds no project

Expected behavior

Seeing as whitespace is not a valid project identifier, I would expect it to be stripped before searching

It would be neat to be able to show the current environment variables for a given project and environment. If the env var is defined in both places, mention which takes precedence.

Being also able to add/edit/delete env vars in the UI would be ace.

A message advising that that a deployment is required to apply the env vars would also be nice.

Browser support has been "best effort" so far, largely depending on how much time individual contributors put into testing different versions. It would be great to have a formal policy in place and testing gates in place to ensure users have a good UI experience.

• Decide on a policy of which browsers and versions are supported
• Ensure we have the capability to test that matrix (like a shared browserstack account)
• Document the support and testing methodologies

At the moment, in order to download a backup from the Lagoon UI, you need to click "Retrieve" and then wait for an amount of time, refresh the page, and then click "Download".

It would be a better UX if the state of the button changed from "Retrieving" to "Download" without having to refresh the page.

There are a few places in the api/ui where Lagoon stores and retrieves files. Currently these are environment backups, task files and insights. The files are retrieved directly from S3 using a signed/short-lived link, meaning no Lagoon authorization is performed once a link is generated.

User may not understand that links used to download these files do not require authentication nor authorization and should be treated securely. The only mitigation if a user exposes the link inadvertently is that it is valid for a short amount of time (currently 5 minutes).

We could inform users of this situation by warning users in the UI. Instead of the download button being a link, it could open a popup with a warning and have the link in there.

Further UX/UI discussion is welcome.

At present, all the logs are just emitted out, with no interpretation of ANSI codes. This can make finding things like errors more difficult, and in general just makes the logs harder to read.

Current workaround

You can remove ANSI codes with most tooling, e.g. composer has composer --no-ansi, this strips the ANSI codes prior to printing. No colour however.

Proposal

Render the default ANSI colours into HTML so that they are viewable in the UI of Lagoon

here is an example of the ANSI codes being emitted, but not rendered:

$ NODE_ENV=production webpack --mode production --progress
�[91m<s> [webpack.Progress] 0% 
�[0m�[91m
�[0m�[91m<s> [webpack.Progress] 1% setup before run
�[0m�[91m<s> [webpack.Progress] 1% setup before run NodeEnvironmentPlugin
�[0m�[91m<s> [webpack.Progress] 1% setup before run
�[0m�[91m<s> [webpack.Progress] 2% setup run
�[0m�[91m<s> [webpack.Progress] 2% setup run webpack-cli
�[0m�[91m<s> [webpack.Progress] 2% setup run WebpackManifestPlugin
�[0m�[91m<s> [webpack.Progress] 2% setup run
�[0m�[91m<s> [webpack.Progress] 4% setup normal module factory

An example with colour

Perhaps something like https://www.npmjs.com/package/ansi-to-html could be used?

Trivial issue of the day. Can we sentence case this title please

If there is a malformed project gitUrl, or if our parser library fails for some reason, it will throw an Error: URL parsing failed.. We don't have any error handling for this, so it causes the entire page to fail.

It would be better to catch the error and fallback to the raw URL being shown on the page. This happens on the project and environment pages.

Here are some options:

DaisyUI: https://daisyui.com/components/

• Based on tailwind css providing react components
• Very themable/customizable - https://daisyui.com/theme-generator/

MaterialUI: https://mui.com/material-ui/

• Rich ecosystem of well typed react components
• Looks too googly - https://mui.com/material-ui/getting-started/templates/

Ant design - https://ant.design/components/overview/

• Works perfectly with typescript with a rich collection of react components, abstracting repetitive component logic
• Theming is possible, works especially well with styled-components

Chakra UI - https://chakra-ui.com/docs/components

• Similar to ant but a bit more customizable
• Themable and easy for devs to get started with

In tandem with XXX - the UI should be able to display any warnings or deprecations generated by the build. These should be highlighted in the build logs page - maybe with a different color, and potentially highlighted on the deployments page with an indicator (as long as the build-deploy tool can pass one alongside the build to show it has warnings)

linked to uselagoon/build-deploy-tool#191

Describe the bug
The "Add Task" button doesn't get disabled after the first click, making it possible to accidentally queue multiple jobs before the use gets feedback that the task has been added.

To Reproduce
Steps to reproduce the behavior:

1. Go to a branch on a project
2. Click on tasks
3. Select "Copy database between environments"
4. Choose a destination environment
5. Click "Add Task" twice in quick succession
6. Notice two tasks running

Expected behavior
The "Add Task" button is disabled after the first click.

Screenshots

Feature request

1. Add a "Copy route" button to the environment tile
2. Add a "Delete" button to the environment tile

Use case

As a website developer, I use Lagoon dashboard regularly and I have to manage several projects with multiple environments each. I've noticed that the majority of time I'm waiting for Lagoon UI to load just to copy the route URL to pass it to my QA team or the Client. I also have to remove some environments manually, and have to wait for the environment screen to load just to hit the "Delete" button. The wait time to load the environment screen can be as long as 1 minute - this means that I have to wait for this time just to perform a simple action.

Please consider adding this or similar functionality to dashboard - you will save time for a lot of developers.

Hello team,
I want to suggest an improvement on le Lagoon UI adding a navbar with some options for making the site navigation easier. For example, a link for going into the projects list, other for the builds list. I'm attaching a screenshot, Maybe it can be more beauty 😄

Regards!

See

At present there is a check to ensure there are no newlines in the key, however if there is an accidental newline (e.g. on the end), it should just be trimmed.

https://github.com/uselagoon/lagoon-ui/blob/main/src/components/SshKeys/AddSshKey.js#L19

At the moment, the sort is project ID (analogous to created) ascending. Meaning the oldest projects are listed first. This is fairly confusing when you have access to a non-trivial amount of projects.

Can we have sorts for:

• Project Name ASC/DESC
• Project Created ASC/DESC

I also think the default sort should be Project Created DESC, so the most recently created project is shown first. Either that or Project Name ASC.

The breadcrumbs in the UI take up a lot of space.

Might be nice if they were 1/2 the size they are now, like this:

Instead of how it is now:

Replicated from uselagoon/lagoon#3092
Presently, destructive or potentially standard tasks in UI will display a warning/ask for confirmation before submitting the task.
Custom tasks have no similar functionality.

It would be good to allow, as part of the custom task definition, the ability to define warning text which, if present, requires the user to confirm before running the task.