Separate swagger to get v2.0 swagger and chart swagger

1. Partial helm api version number clear
2. Separate swagger to get v2.0 swagger and chart swagger
3. router add chart swagger

Signed-off-by: Yogi_Wang <yawang@vmware.com>

make/photon/portal/Dockerfile

@@ -14,9 +14,11 @@ COPY src/portal/package-lock.json /build_dir
 COPY src/portal/scripts /build_dir
 COPY ./api/v2.0/legacy_swagger.yaml /build_dir/swagger.yaml
 COPY ./api/v2.0/swagger.yaml /build_dir/swagger2.yaml
+COPY ./api/swagger.yaml /build_dir/swagger3.yaml
 
 RUN python -c 'import sys, yaml, json; y=yaml.load(sys.stdin.read()); print json.dumps(y)' < swagger.yaml > swagger.json
 RUN python -c 'import sys, yaml, json; y=yaml.load(sys.stdin.read()); print json.dumps(y)' < swagger2.yaml > swagger2.json
+RUN python -c 'import sys, yaml, json; y=yaml.load(sys.stdin.read()); print json.dumps(y)' < swagger3.yaml > swagger3.json
 
 COPY ./LICENSE /build_dir
 COPY src/portal /build_dir
@@ -31,6 +33,7 @@ COPY --from=nodeportal /build_dir/dist /usr/share/nginx/html
 COPY --from=nodeportal /build_dir/swagger.yaml /usr/share/nginx/html
 COPY --from=nodeportal /build_dir/swagger.json /usr/share/nginx/html
 COPY --from=nodeportal /build_dir/swagger2.json /usr/share/nginx/html
+COPY --from=nodeportal /build_dir/swagger3.json /usr/share/nginx/html
 COPY --from=nodeportal /build_dir/LICENSE /usr/share/nginx/html
 
 COPY make/photon/portal/nginx.conf /etc/nginx/nginx.conf

src/portal/src/app/base/harbor-shell/harbor-shell.component.html

@@ -13,7 +13,7 @@
             <clr-icon (click)="closeInfo()" class="close-icon" shape="times" size="24"></clr-icon>
         </div>
     </div>
-    <global-message [isAppLevel]="true" ></global-message>
+    <global-message [isAppLevel]="true"></global-message>
     <navigator (showAccountSettingsModal)="openModal($event)" (showDialogModalAction)="openModal($event)"></navigator>
     <div class="content-container">
         <div class="content-area" [class.container-override]="showSearch"
@@ -80,6 +80,7 @@
                     </clr-vertical-nav-group-children>
                 </clr-vertical-nav-group>
             </div>
+            <div>
             <div class="vertical-nav-footer">
                 <ng-container *ngFor="let theme of themeArray;let i=index">
                     <ng-container *ngIf="theme.showStyle === styleMode">
@@ -91,13 +92,26 @@
                         </a>
                     </ng-container>
                 </ng-container>
-                <a class="mt-1" clrVerticalNavLink target="_blank" routerLink="/devcenter">
-                    <button type="button" class="btn  api-button">
-                        <span>{{'SIDE_NAV.API_EXPLORER' | translate }}</span>
-                    </button>
-                </a>
             </div>
 
+            <clr-vertical-nav-group routerLinkActive="active">
+                <clr-icon shape="network-globe" clrVerticalNavIcon></clr-icon>
+                {{'SIDE_NAV.API_EXPLORER' | translate}}
+                <a routerLink="#" hidden aria-hidden="true"></a>
+                <clr-vertical-nav-group-children *clrIfExpanded="true">
+                    <a class="font-size-13" clrVerticalNavLink target="_blank" routerLink="/devcenter-api-2.0"
+                        routerLinkActive="active">
+                        <clr-icon shape="network-globe" clrVerticalNavIcon></clr-icon>
+                        {{'SIDE_NAV.HARBOR_API_MANAGEMENT' | translate}}
+                    </a>
+                    <a class="font-size-13" clrVerticalNavLink target="_blank" routerLink="/devcenter-api"
+                    routerLinkActive="active">
+                        <clr-icon shape="network-globe" clrVerticalNavIcon></clr-icon>
+                        {{'SIDE_NAV.HELM_API_MANAGEMENT' | translate}}
+                    </a>
+                </clr-vertical-nav-group-children>
+            </clr-vertical-nav-group>
+            </div>
         </clr-vertical-nav>
         <hbr-operation-model *ngIf="isUserExisting"></hbr-operation-model>
     </div>
@@ -105,4 +119,4 @@
 <account-settings-modal></account-settings-modal>
 <password-setting></password-setting>
 <confiramtion-dialog></confiramtion-dialog>
-<about-dialog></about-dialog>
+<about-dialog></about-dialog>

src/portal/src/app/base/harbor-shell/harbor-shell.component.scss

@@ -33,7 +33,7 @@ clr-vertical-nav {
         }
     }
     .vertical-nav-footer {
-        margin: 15px 20px;
+        margin: 5px 23px;
         a {
             display: inline-block;
             line-height: 0;
@@ -49,6 +49,9 @@ clr-vertical-nav {
         }
 	}
 }
+.font-size-13 {
+    font-size: 13px;
+}
 
 .scanner-info {
     margin-right: 0;

src/portal/src/app/dev-center/dev-center-base.ts

@@ -0,0 +1,38 @@
+import { AfterViewInit, OnInit } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+import { TranslateService } from '@ngx-translate/core';
+import { CookieService } from "ngx-cookie";
+
+export  abstract class DevCenterBase implements OnInit, AfterViewInit {
+  constructor(
+    public translate: TranslateService,
+    public cookieService: CookieService,
+    public titleService: Title) {
+  }
+
+  ngOnInit() {
+    this.setTitle("APP_TITLE.HARBOR_SWAGGER");
+  }
+
+  private setTitle(key: string) {
+    this.translate.get(key).subscribe((res: string) => {
+      this.titleService.setTitle(res);
+    });
+  }
+  public getCsrfInterceptor() {
+    return {
+        requestInterceptor: {
+          apply: (requestObj) => {
+            const csrfCookie = this.cookieService.get('__csrf');
+            const headers = requestObj.headers || {};
+            if (csrfCookie) {
+              headers["X-Harbor-CSRF-Token"] = csrfCookie;
+            }
+            return requestObj;
+          }
+        }
+      };
+  }
+  abstract getSwaggerUI();
+  abstract ngAfterViewInit();
+}

src/portal/src/app/dev-center/dev-center-other.component.spec.ts

@@ -0,0 +1,53 @@
+import { async, ComponentFixture, TestBed, getTestBed } from '@angular/core/testing';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { DevCenterOtherComponent } from './dev-center-other.component';
+import { CookieService } from 'ngx-cookie';
+
+describe('DevCenterOtherComponent', () => {
+  let component: DevCenterOtherComponent;
+  let fixture: ComponentFixture<DevCenterOtherComponent>;
+  const mockCookieService = {
+    get: () => {
+      return "xsrf";
+    }
+  };
+  let injector: TestBed;
+  let httpMock: HttpTestingController;
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [DevCenterOtherComponent],
+      imports: [
+        HttpClientTestingModule,
+        TranslateModule.forRoot()
+      ],
+      providers: [
+        TranslateService,
+        {
+          provide: CookieService, useValue: mockCookieService
+        }
+      ],
+    })
+      .compileComponents();
+    injector = getTestBed();
+    httpMock = injector.get(HttpTestingController);
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DevCenterOtherComponent);
+    component = fixture.componentInstance;
+    fixture.autoDetectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+  it('get swagger should return data', () => {
+    const req = httpMock.expectOne('/swagger3.json');
+    expect(req.request.method).toBe('GET');
+    req.flush({
+      "host": '122.33',
+    });
+  });
+
+});

src/portal/src/app/dev-center/dev-center-other.component.ts

@@ -0,0 +1,61 @@
+import { AfterViewInit, Component, ElementRef, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { throwError as observableThrowError, forkJoin } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+import { Title } from '@angular/platform-browser';
+import { TranslateService } from '@ngx-translate/core';
+import { CookieService } from "ngx-cookie";
+import * as SwaggerUI from 'swagger-ui';
+import { DevCenterBase } from './dev-center-base';
+
+enum SwaggerJsonUrls {
+  CHARTMUSEUM = '/swagger3.json'
+}
+
+@Component({
+  selector: 'dev-center-other',
+  templateUrl: 'dev-center.component.html',
+  viewProviders: [Title],
+  styleUrls: ['dev-center.component.scss']
+})
+export class DevCenterOtherComponent extends DevCenterBase implements AfterViewInit, OnInit {
+  private ui: any;
+  constructor(
+    private el: ElementRef,
+    private http: HttpClient,
+    public translate: TranslateService,
+    public cookieService: CookieService,
+    public titleService: Title) {
+    super(translate, cookieService, titleService);
+  }
+
+  ngAfterViewInit() {
+    this.getSwaggerUI();
+  }
+  getSwaggerUI() {
+    const _this = this;
+    this.http.get(SwaggerJsonUrls.CHARTMUSEUM)
+      .pipe(catchError(error => observableThrowError(error)))
+      .subscribe(json => {
+        json['host'] = window.location.host;
+        const protocal = window.location.protocol;
+        json['schemes'] = [protocal.replace(":", "")];
+        this.ui = SwaggerUI({
+          spec: json,
+          domNode: this.el.nativeElement.querySelector('.swagger-container'),
+          deepLinking: true,
+          presets: [
+            SwaggerUI.presets.apis
+          ],
+          requestInterceptor: this.getCsrfInterceptor().requestInterceptor,
+          authorizations: {
+            csrf: function () {
+              this.headers['X-Harbor-CSRF-Token'] = _this.cookieService.get('__csrf');
+              return true;
+            }
+          }
+        });
+      });
+  }
+
+}

src/portal/src/app/dev-center/dev-center.component.ts

@@ -7,6 +7,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { CookieService } from "ngx-cookie";
 import * as SwaggerUI from 'swagger-ui';
 import { mergeDeep } from "../../lib/utils/utils";
+import { DevCenterBase } from "./dev-center-base";
 
 enum SwaggerJsonUrls {
   SWAGGER1 = '/swagger.json',
@@ -19,41 +20,22 @@ enum SwaggerJsonUrls {
   viewProviders: [Title],
   styleUrls: ['dev-center.component.scss']
 })
-export class DevCenterComponent implements AfterViewInit, OnInit {
+export class DevCenterComponent extends DevCenterBase implements AfterViewInit, OnInit {
   private ui: any;
   constructor(
     private el: ElementRef,
     private http: HttpClient,
-    private translate: TranslateService,
+    public translate: TranslateService,
-    private cookieService: CookieService,
+    public cookieService: CookieService,
-    private titleService: Title) {
+    public titleService: Title) {
-  }
+      super(translate, cookieService, titleService);
-
-  ngOnInit() {
-    this.setTitle("APP_TITLE.HARBOR_SWAGGER");
-  }
-
-  public setTitle(key: string) {
-    this.translate.get(key).subscribe((res: string) => {
-      this.titleService.setTitle(res);
-    });
   }
 
   ngAfterViewInit() {
-
+    this.getSwaggerUI();
+  }
+  getSwaggerUI() {
     const _this = this;
-    const interceptor = {
-      requestInterceptor: {
-        apply: (requestObj) => {
-          const csrfCookie = this.cookieService.get('__csrf');
-          const headers = requestObj.headers || {};
-          if (csrfCookie) {
-            headers["X-Harbor-CSRF-Token"] = csrfCookie;
-          }
-          return requestObj;
-        }
-      }
-    };
     forkJoin([this.http.get(SwaggerJsonUrls.SWAGGER1), this.http.get(SwaggerJsonUrls.SWAGGER2)])
       .pipe(catchError(error => observableThrowError(error)))
       .subscribe(jsonArr => {
@@ -69,7 +51,7 @@ export class DevCenterComponent implements AfterViewInit, OnInit {
           presets: [
             SwaggerUI.presets.apis
           ],
-          requestInterceptor: interceptor.requestInterceptor,
+          requestInterceptor: this.getCsrfInterceptor().requestInterceptor,
           authorizations: {
             csrf: function () {
               this.headers['X-Harbor-CSRF-Token'] = _this.cookieService.get('__csrf');

src/portal/src/app/dev-center/dev-center.module.ts

@@ -4,6 +4,7 @@ import { CommonModule } from "@angular/common";
 import { ClarityModule } from '@clr/angular';
 import { SharedModule } from '../shared/shared.module';
 import { DevCenterComponent } from "./dev-center.component";
+import { DevCenterOtherComponent } from "./dev-center-other.component";
 
 
 @NgModule({
@@ -18,6 +19,7 @@ import { DevCenterComponent } from "./dev-center.component";
     ],
     declarations: [
         DevCenterComponent,
+        DevCenterOtherComponent,
     ],
 })
 export class DeveloperCenterModule {}

src/portal/src/app/harbor-routing.module.ts

@@ -23,6 +23,7 @@ import { PageNotFoundComponent } from './shared/not-found/not-found.component';
 import { HarborShellComponent } from './base/harbor-shell/harbor-shell.component';
 import { ConfigurationComponent } from './config/config.component';
 import { DevCenterComponent } from './dev-center/dev-center.component';
+import { DevCenterOtherComponent } from './dev-center/dev-center-other.component';
 import { GcPageComponent } from './gc-page/gc-page.component';
 import { UserComponent } from './user/user.component';
 import { SignInComponent } from './sign-in/sign-in.component';
@@ -67,9 +68,13 @@ const harborRoutes: Routes = [
   { path: '', redirectTo: 'harbor', pathMatch: 'full' },
   { path: 'reset_password', component: ResetPasswordComponent },
   {
-    path: 'devcenter',
+    path: 'devcenter-api-2.0',
     component: DevCenterComponent
   },
+  {
+    path: 'devcenter-api',
+    component: DevCenterOtherComponent
+  },
   {
     path: 'oidc-onboard',
     component: OidcOnboardComponent,

src/portal/src/i18n/lang/en-us-lang.json

@@ -173,7 +173,9 @@
         },
         "LOGS": "Logs",
         "TASKS": "Tasks",
-        "API_EXPLORER": "API EXPLORER"
+        "API_EXPLORER": "Api Explorer",
+        "HARBOR_API_MANAGEMENT": "Harbor API V2.0",
+        "HELM_API_MANAGEMENT": "Harbor API"
     },
     "USER": {
         "ADD_ACTION": "New User",

src/portal/src/i18n/lang/es-es-lang.json

@@ -173,7 +173,9 @@
         },
         "LOGS": "Logs",
         "TASKS": "Tasks",
-        "API_EXPLORER": "API EXPLORER"
+        "API_EXPLORER": "Api Explorer",
+        "HARBOR_API_MANAGEMENT": "Harbor API V2.0",
+        "HELM_API_MANAGEMENT": "Harbor API"
     },
     "USER": {
         "ADD_ACTION": "New User",

src/portal/src/i18n/lang/fr-fr-lang.json

@@ -167,7 +167,9 @@
         },
         "LOGS": "Logs",
         "TASKS": "Tasks",
-        "API_EXPLORER": "API EXPLORER"
+        "API_EXPLORER": "Api Explorer",
+        "HARBOR_API_MANAGEMENT": "Harbor API V2.0",
+        "HELM_API_MANAGEMENT": "Harbor API"
     },
     "USER": {
         "ADD_ACTION": "UTILISATEUR",

src/portal/src/i18n/lang/pt-br-lang.json

@@ -171,7 +171,9 @@
         },
         "LOGS": "Logs",
         "TASKS": "Tasks",
-        "API_EXPLORER": "API EXPLORER"
+        "API_EXPLORER": "Api Explorer",
+        "HARBOR_API_MANAGEMENT": "Harbor API V2.0",
+        "HELM_API_MANAGEMENT": "Harbor API"
     },
     "USER": {
         "ADD_ACTION": "Novo Usuário",

src/portal/src/i18n/lang/tr-tr-lang.json

@@ -173,7 +173,9 @@
         },
         "LOGS": "Kayıtlar",
         "TASKS": "Görevler",
-        "API_EXPLORER": "API KEŞFİ"
+        "API_EXPLORER": "Api Explorer",
+        "HARBOR_API_MANAGEMENT": "Harbor API V2.0",
+        "HELM_API_MANAGEMENT": "Harbor API"
     },
     "USER": {
         "ADD_ACTION": "Yeni Kullanıcı",

src/portal/src/i18n/lang/zh-cn-lang.json

@@ -172,7 +172,9 @@
         },
         "LOGS": "日志",
         "TASKS": "任务",
-        "API_EXPLORER": "API控制中心"
+        "API_EXPLORER": "API控制中心",
+        "HARBOR_API_MANAGEMENT": "Harbor Api V2.0",
+        "HELM_API_MANAGEMENT": "Harbor Api"
     },
     "USER": {
         "ADD_ACTION": "创建用户",