Sorting discrepancies for new environment page
Description
The previous version of environment details page have deployments sorted based on finished_at
field, showing scheduled deployments (i.e. not having finished_at value yet) on top.
The new vue implementation of environment details page uses GraphQL api to fetch the data, and is currently using created_at
field as sorting parameter.
It is not possible to just switch sorting to finished_at
as it would require adding a filter on state
ensuring that finished_at
field is present. That would obviously exclude scheduled or not finished jobs from showing on the environment details page.
Implementation proposal
With the current implementation of GraphQL API, we need two separate queries to show upcoming deployments, and deployments that have completed.
UX Proposal
- We implement the first iteration of the filter proposal, which would include a sort component that would allow users to sort deployments by
created_on
ordeployed_on
based on their preference. - For iteration 1 we would hide blocked/non-deployed deployments from the
deployed_on
sort. - By default we show the page sorted by
created_at
field - The usage of a filter can be tracked by exploring .com logs for future decision making
Created_on | Deployed_on |
---|---|
Figma File
Technical proposal
We have an existing sorting dropdown component in gitlab-ui that can control selected sorting parameter and direction.
We should add these to /environments/graphql/queries/environment_details.query.graphql
graphql query as variables and bind them to the component.
Note that it's not enought to just change the sorting field, as the backend has a limitation on deployment statuses allowed for each sorting field. One way to solve it would be to have another variable for the query that would set a statuses. We could set this variable to pre-defined lists of statuses based on what is selected in the dropdown.
Since keyset pagination only makes sense within the same dataset, pagination data should be dropped after the user changes the sorting. That should be fine, as they always can get back to the previous view clicking browser back button.
Files of interest:
/environments/graphql/queries/environment_details.query.graphql
/environments/environment_details/index.vue