From: Aashish Sharma Date: Tue, 25 May 2021 08:40:50 +0000 (+0530) Subject: mgr/dashboard: introduce seperate frontend component for API docs X-Git-Tag: v16.2.8~284^2 X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=3b2fb117c3a30bc7943cd585fd0036be5598d437;p=ceph.git mgr/dashboard: introduce seperate frontend component for API docs 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 (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) --- diff --git a/src/pybind/mgr/dashboard/controllers/docs.py b/src/pybind/mgr/dashboard/controllers/docs.py index da040f86f89a..201cc20b34b3 100644 --- a/src/pybind/mgr/dashboard/controllers/docs.py +++ b/src/pybind/mgr/dashboard/controllers/docs.py @@ -393,75 +393,14 @@ class Docs(BaseController): 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 = """ - - - - - - - - - -

- - - - - """.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 diff --git a/src/pybind/mgr/dashboard/frontend/angular.json b/src/pybind/mgr/dashboard/frontend/angular.json index 3a3dac350acb..2d3f5240c945 100644 --- a/src/pybind/mgr/dashboard/frontend/angular.json +++ b/src/pybind/mgr/dashboard/frontend/angular.json @@ -56,6 +56,7 @@ } ], "styles": [ + "node_modules/swagger-ui/dist/swagger-ui.css", "node_modules/ngx-toastr/toastr.css", "src/styles.scss" ], diff --git a/src/pybind/mgr/dashboard/frontend/src/app/app-routing.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/app-routing.module.ts index afd0d0c01dc5..959cb3769970 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/app-routing.module.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/app-routing.module.ts @@ -35,6 +35,7 @@ import { ErrorComponent } from './core/error/error.component'; 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'; @@ -78,6 +79,7 @@ export class StartCaseBreadcrumbsResolver extends BreadcrumbsResolver { const routes: Routes = [ // Dashboard { path: '', redirectTo: 'dashboard', pathMatch: 'full' }, + { path: 'api-docs', component: ApiDocsComponent }, { path: '', component: WorkbenchLayoutComponent, diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/api-docs/api-docs.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/api-docs/api-docs.component.html new file mode 100644 index 000000000000..2dd0ff424c0f --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/api-docs/api-docs.component.html @@ -0,0 +1,3 @@ + +

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/api-docs/api-docs.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/api-docs/api-docs.component.scss new file mode 100644 index 000000000000..88928648859b --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/api-docs/api-docs.component.scss @@ -0,0 +1,7 @@ +@use './src/styles/vendor/variables' as vv; + +.apiDocs { + background: vv.$gray-100; + font-size: 18px !important; + margin-top: -48px !important; +} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/api-docs/api-docs.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/api-docs/api-docs.component.ts new file mode 100644 index 000000000000..7d9ea86ebe81 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/api-docs/api-docs.component.ts @@ -0,0 +1,18 @@ +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' + }); + } +} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/dashboard-help/dashboard-help.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/dashboard-help/dashboard-help.component.html index 766645fa7e72..274ec71df78b 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/dashboard-help/dashboard-help.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/dashboard-help/dashboard-help.component.html @@ -15,7 +15,7 @@ target="_blank" i18n>documentation API