How do I manually order the endpoints displayed on Swagger UI?

Question

I'm using Docket to configure my Swagger 2 instance. But the only Options I currently see are to sort by Type (POST, GET, etc.) or by endpoint name (a-z).

There is a logical order to my endpoints and I'd like to display them in that order

What I want:

POST /start
POST /uplaod
POST /finalize
POST /checkStatus

Instead I get something like this:

POST /checkStatus
POST /finalize
POST /start
POST /upload

Code:

    @Bean
    public Docket api() {
        return new Docket(DocumentationType.SWAGGER_2)
                .host(swaggerHost)
                .pathProvider(new RelativePathProvider(servletContext) {

                    @Override
                    public String getApplicationBasePath() {
                        return swaggerBasePath;
                    }
                })
                .select()
                .apis(RequestHandlerSelectors.withClassAnnotation(Api.class))
                .build()
                .apiInfo(apiInfo())
                .securitySchemes(Collections.singletonList(securitySchema()))
                .securityContexts(Collections.singletonList(securityContext()));
    }

Poachy

This might be a duplicate of https://mcmap.net/q/640945/-swagger-api-operations-ordering/8929501 – Waltner

No, that's the opposite of my question. – Poachy

I'm trying to manually order them, not auto-sort them. – Poachy

Did you see this answer? https://mcmap.net/q/640945/-swagger-api-operations-ordering That answer states that you can use operationOrdering() to manually order – Waltner

That sorts it alphabetically by method name, not by a manual order. – Poachy

Additional clarification, "method" in this context is POST/GET/etc. it is not the Java method name. – Poachy

You will have to implement your custom ordering inside that public int compare(Operation left, Operation right) method. It's similar to implementing a sort order with the compareTo of Comparable – Waltner

I started to try that, but it didn't appear to have the endpoint names readily available to use for ordering. Do you happen to know which left.methodNameHere() would have that info? – Poachy

Answer 1

Sorting operations in Swagger UI - Sort by specific http verb order, then by path

For example, the Swagger UI accepts configuration from a configuration object passed as an argument to Swagger UI (SwaggerUI({ ... }))

const swaggerUI = SwaggerUI({
    operationsSorter: function (a, b) {
        const order = {
            'get': '0', 'post': '1', 'patch': '2', 'put': '3', 'delete': '4',
            'head': '5', 'options': '6', 'connect': '7', 'trace': '8'
        };
        return (
            order[a.get("method")].localeCompare(order[b.get("method")])
            || a.get("path").localeCompare(b.get("path"))
        );
    }
});

See https://swagger.io/docs/open-source-tools/swagger-ui/usage/configuration/

Christhood

Where is operationsSorter supposed to be setup? – Poachy

Answer 2

An easy way to order the endpoints for swagger UI is to use tags: https://swagger.io/docs/specification/grouping-operations-with-tags/

Edit: adding the alternative I use to address a comment below: I tend to use the operationsSorter with a custom comparison function. Example:

operationsSorter: function (a, b) {
  var order = {'get': '0', 'post': '1', 'patch': '2', 'put': '3', 'delete': '4'};
  if (a.get('path') == b.get('path')) {
    return order[a.get('method')].localeCompare(order[b.get('method')]);
  }
  if (a.get('path').split('/').length == b.get('path').split('/').length) {
    return a.get('path').split('/').slice(-1)[0].localeCompare(b.get('path').split('/').slice(-1)[0]);
  }
  return a.get('path').split('/').length - b.get('path').split('/').length;
}

Ibert

And how do you sort the endpoints inside the tag? E.g. what if you have 10 endpoints with same tag - how are those sorted? – Angloirish

@StijnV have added a comment above – Ibert