How to hide server descriptions in Swagger UI?

user_10248006 0
Viewed 5161

I have an OpenAPI 3.0 definition with multiple servers:

servers:
- url: https://development.gigantic-server.com/v1
  description: Development server
- url: https://staging.gigantic-server.com/v1
  description: Staging server
- url: https://api.gigantic-server.com/v1
  description: Production server

When this definition is rendered in Swagger UI, the "Servers" dropdown shows the description of each server:

Server descriptions in Swagger UI

Is it possible to hide the server descriptions from this dropdown?

oas swagger-editor swagger-ui openapi yaml
2 Answers

They haven't provided any option to replace this server's description in another place, but they have mentioned the description is optional in swagger specification of object representing a Server.

Swagger UI have not provided any rendering option for this.

The best use of description is define in a single word, like production, development, api, staging, etc..

If you really don't want in dropdown then you can remove it from your server list.

servers:
- url: https://development.gigantic-server.com/v1
- url: https://staging.gigantic-server.com/v1
- url: https://api.gigantic-server.com/v1

This part i am writing for your information, about how to use oas-servers,

I observed your server urls, these can be easily define in single url, how? using server variables.

servers:
- url: https://{environment}.gigantic-server.com/{version}
  variables: 
    environment:
      enum:
        - 'development'
        - 'staging'
        - 'api'
    version:
      enum:
        - 'v1'

Hope this help.

user_89871280

Swagger UI always renders server description if it's provided, this is hard-coded:
https://github.com/swagger-api/swagger-ui/blob/master/src/core/plugins/oas3/components/servers.jsx#L114

As a workaround you can modify the API definition dynamically after it's loaded and remove server descriptions. To do that, edit your index.html page and add the following onComplete function to the Swagger UI initialization code:

  const ui = SwaggerUIBundle({
    url: "https://path/to/your/openapi.json",
    ...

    onComplete: function() {
      let spec = ui.specSelectors.specJson().toJS();
      let servers = spec.servers || [];

      for (let i in servers) {
        servers[i].description = ""
      }

      ui.specActions.updateJsonSpec(spec);
    }
  })
user_1131160
Related