This PR intends to add a separate frontend component for the API docs that are currently being rendered from the python code.
Fixes: https://tracker.ceph.com/issues/50955
Signed-off-by: Aashish Sharma <aasharma@redhat.com>
(cherry picked from commit
2c396be7cc47762290199609b99fba09f3573899)
Conflicts:
src/pybind/mgr/dashboard/frontend/package-lock.json
src/pybind/mgr/dashboard/frontend/package.json (added new swagger packages)
return spec
- @Endpoint(path="api.json", version=None)
- def api_json(self):
+ @Endpoint(path="openapi.json", version=None)
+ def open_api_json(self):
return self._gen_spec(False, "/")
@Endpoint(path="api-all.json", version=None)
def api_all_json(self):
return self._gen_spec(True, "/")
- def _swagger_ui_page(self, all_endpoints=False):
- base = cherrypy.request.base
- if all_endpoints:
- spec_url = "{}/docs/api-all.json".format(base)
- else:
- spec_url = "{}/docs/api.json".format(base)
-
- page = """
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <meta name="referrer" content="no-referrer" />
- <link rel="stylesheet" type="text/css"
- href="/swagger-ui.css" >
- <style>
- html
- {{
- box-sizing: border-box;
- overflow: -moz-scrollbars-vertical;
- overflow-y: scroll;
- }}
- *,
- *:before,
- *:after
- {{
- box-sizing: inherit;
- }}
- body {{
- margin:0;
- background: #fafafa;
- }}
- </style>
- </head>
- <body>
- <div id="swagger-ui"></div>
- <script src="/swagger-ui-bundle.js">
- </script>
- <script>
- window.onload = function() {{
- const ui = SwaggerUIBundle({{
- url: '{}',
- dom_id: '#swagger-ui',
- presets: [
- SwaggerUIBundle.presets.apis
- ],
- layout: "BaseLayout"
- }})
- window.ui = ui
- }}
- </script>
- </body>
- </html>
- """.format(spec_url)
-
- return page
-
- @Endpoint(json_response=False, version=None)
- def __call__(self, all_endpoints=False):
- return self._swagger_ui_page(all_endpoints)
-
if __name__ == "__main__":
import sys
}
],
"styles": [
+ "node_modules/swagger-ui/dist/swagger-ui.css",
"node_modules/ngx-toastr/toastr.css",
"src/styles.scss"
],
import { BlankLayoutComponent } from './core/layouts/blank-layout/blank-layout.component';
import { LoginLayoutComponent } from './core/layouts/login-layout/login-layout.component';
import { WorkbenchLayoutComponent } from './core/layouts/workbench-layout/workbench-layout.component';
+import { ApiDocsComponent } from './core/navigation/api-docs/api-docs.component';
import { ActionLabels, URLVerbs } from './shared/constants/app.constants';
import { BreadcrumbsResolver, IBreadcrumb } from './shared/models/breadcrumbs';
import { AuthGuardService } from './shared/services/auth-guard.service';
const routes: Routes = [
// Dashboard
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
+ { path: 'api-docs', component: ApiDocsComponent },
{
path: '',
component: WorkbenchLayoutComponent,
--- /dev/null
+
+<div id="swagger-ui"
+ class="apiDocs"></div>
--- /dev/null
+@use './src/styles/vendor/variables' as vv;
+
+.apiDocs {
+ background: vv.$gray-100;
+ font-size: 18px !important;
+ margin-top: -48px !important;
+}
--- /dev/null
+import { Component, OnInit } from '@angular/core';
+
+import SwaggerUI from 'swagger-ui';
+
+@Component({
+ selector: 'cd-api-docs',
+ templateUrl: './api-docs.component.html',
+ styleUrls: ['./api-docs.component.scss']
+})
+export class ApiDocsComponent implements OnInit {
+ ngOnInit(): void {
+ SwaggerUI({
+ url: window.location.origin + '/docs/openapi.json',
+ dom_id: '#swagger-ui',
+ layout: 'BaseLayout'
+ });
+ }
+}
target="_blank"
i18n>documentation</a>
<a ngbDropdownItem
- href="/docs"
+ routerLink="/api-docs"
target="_blank"
i18n>API</a>
<button ngbDropdownItem
import { AuthModule } from '../auth/auth.module';
import { AboutComponent } from './about/about.component';
import { AdministrationComponent } from './administration/administration.component';
+import { ApiDocsComponent } from './api-docs/api-docs.component';
import { BreadcrumbsComponent } from './breadcrumbs/breadcrumbs.component';
import { DashboardHelpComponent } from './dashboard-help/dashboard-help.component';
import { IdentityComponent } from './identity/identity.component';
],
declarations: [
AboutComponent,
+ ApiDocsComponent,
BreadcrumbsComponent,
NavigationComponent,
NotificationsComponent,
@extend .fa-fw;
}
-pre {
+pre:not(cd-api-docs *) {
@extend .card;
@extend .bg-light;
@extend .p-2;
justify-content: center;
}
-.loading {
+.loading:not(cd-api-docs *) {
left: 50%;
position: absolute;
top: 50%;