Predictable and human readable URLs

Suggestions
1

I’d like to propose that the main URLs used to access projects and pipelines make use of slugs generated from the project/pipeline name, instead of the current URLs (see examples below).

While I realise that there are issues with using pipeline/project names in the URL (in particular - what happens when you rename a pipeline/project), this offers a good user experience by making them predictable, easy to find in your browser history, easy to share, and even easy to type from scratch.

Some examples of CodeFresh currently with proposed changes:

  • List of projects is currently at: /projects (good start)
  • View one project from the list of projects:
    • Currently: /projects/PROJECT_NAME/edit/pipelines/? projectId=LONG_HASH&filter=pageSize:10;field:name~Name;order:asc~Asc
    • Proposed: /projects/PROJECT_NAME
  • View a pipeline from the project page:
    • Currently: /pipelines/edit/new/builds?id=LONG_HASH&pipeline=PIPELINE_NAME&projects=PROJECT_NAME&projectId=LONG_HASH&context=&filter=page:1
    • Proposed: /projects/PROJECT_NAME/PIPELINE_NAME

Building on this, you could then navigate to the Workflow/Settings/Builds URLs by appending these strings:

  • /projects/PROJECT_NAME/PIPELINE_NAME/workflow
  • /projects/PROJECT_NAME/PIPELINE_NAME/settings
  • /projects/PROJECT_NAME/PIPELINE_NAME/builds

Examples from other systems:

GitHub:

  • /ORGANISATION_NAME
  • /ORGANISATION_NAME/PROJECT_NAME
  • /ORGANISATION_NAME/PROJECT_NAME/settings

OpenShift:

  • /ns/NAMESPACE_NAME
  • /ns/NAMESPACE_NAME/services/ocelot-entity
  • /ns/NAMESPACE_NAME/services/ocelot-entity/yaml
2

Somewhat peripherally related, it would also be helpful to change links to be <a> tags instead of <span>'s with an ng-click listener.

Often times I want to keep the current page open, and navigate to a sibling page to compare two builds. Normally in a web page I do this by either Ctrl+Clicking or Middle clicking a link on the page to open the other page in a separate window. This behaviour is not possible with the current <span> + ng-click solution. Switching to an <a> tag (which can still us ng-click if absolutely required) will solve this, and also provide accessibility improvements too.

3

Hello.

I will forward your comments to our UX team.

Know however that in Codefresh you can create pipelines that are outside of projects. So at any given point in time you might have a mix of pipelines (those that are and those that are not in a project).

The URL scheme that you propose (with the project prefix) will be hard to apply in a universal manner.

4

Thanks for the feedback, I wasn’t aware of the pipelines-outside-of-projects.

I suppose it isn’t so much about the specific proposal I have outlined above, but rather the general theme. As you mention, the UX team would be better placed at identifying a specific design which meets the goals of predictable and human readable URLs, while still conforming with the layout of information that CodeFresh has to handle.