movoHelmChart

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

src/portal/lib/src/app.module.ts

@@ -13,7 +13,7 @@ import { HarborLibraryModule } from './harbor-library.module';
         BrowserModule,
         FormsModule,
         HttpModule,
-        ClarityModule.forRoot(),
+        ClarityModule,
         HarborLibraryModule.forRoot()
     ],
     providers: [],

src/portal/lib/src/harbor-library.module.ts

@@ -27,7 +27,6 @@ import { OPERATION_DIRECTIVES } from './operation/index';
 import { LABEL_DIRECTIVES } from "./label/index";
 import { CREATE_EDIT_LABEL_DIRECTIVES } from "./create-edit-label/index";
 import { LABEL_PIECE_DIRECTIVES } from "./label-piece/index";
-import { HELMCHART_DIRECTIVE } from "./helm-chart/index";
 import { IMAGE_NAME_INPUT_DIRECTIVES } from "./image-name-input/index";
 import { CRON_SCHEDULE_DIRECTIVES } from "./cron-schedule/index";
 import {
@@ -53,8 +52,6 @@ import {
   ProjectDefaultService,
   LabelService,
   LabelDefaultService,
-  HelmChartService,
-  HelmChartDefaultService,
   RetagService,
   RetagDefaultService,
   UserPermissionService,
@@ -209,7 +206,6 @@ export function initConfig(translateInitializer: TranslateServiceInitializer, co
     HBR_GRIDVIEW_DIRECTIVES,
     REPOSITORY_GRIDVIEW_DIRECTIVES,
     OPERATION_DIRECTIVES,
-    HELMCHART_DIRECTIVE,
     IMAGE_NAME_INPUT_DIRECTIVES,
     CRON_SCHEDULE_DIRECTIVES
   ],
@@ -237,9 +233,9 @@ export function initConfig(translateInitializer: TranslateServiceInitializer, co
     HBR_GRIDVIEW_DIRECTIVES,
     REPOSITORY_GRIDVIEW_DIRECTIVES,
     OPERATION_DIRECTIVES,
-    HELMCHART_DIRECTIVE,
     IMAGE_NAME_INPUT_DIRECTIVES,
-    CRON_SCHEDULE_DIRECTIVES
+    CRON_SCHEDULE_DIRECTIVES,
+    SharedModule
   ],
   providers: []
 })
@@ -263,7 +259,6 @@ export class HarborLibraryModule {
         config.jobLogService || { provide: JobLogService, useClass: JobLogDefaultService },
         config.projectPolicyService || { provide: ProjectService, useClass: ProjectDefaultService },
         config.labelService || { provide: LabelService, useClass: LabelDefaultService },
-        config.helmChartService || { provide: HelmChartService, useClass: HelmChartDefaultService },
         config.userPermissionService || { provide: UserPermissionService, useClass: UserPermissionDefaultService },
         config.gcApiRepository || {provide: GcApiRepository, useClass: GcApiDefaultRepository},
         // Do initializing
@@ -300,7 +295,6 @@ export class HarborLibraryModule {
         config.jobLogService || { provide: JobLogService, useClass: JobLogDefaultService },
         config.projectPolicyService || { provide: ProjectService, useClass: ProjectDefaultService },
         config.labelService || { provide: LabelService, useClass: LabelDefaultService },
-        config.helmChartService || { provide: HelmChartService, useClass: HelmChartDefaultService },
         config.userPermissionService || { provide: UserPermissionService, useClass: UserPermissionDefaultService },
         config.gcApiRepository || {provide: GcApiRepository, useClass: GcApiDefaultRepository},
         ChannelService,

src/portal/lib/src/helm-chart/index.ts

@@ -1,23 +0,0 @@
-import { Type } from '@angular/core';
-import { HelmChartComponent } from './helm-chart.component';
-import { ChartVersionComponent } from './versions/helm-chart-version.component';
-import { ChartDetailComponent } from './chart-detail/chart-detail.component';
-import { ChartDetailSummaryComponent } from './chart-detail/chart-detail-summary.component';
-import { ChartDetailDependencyComponent } from './chart-detail/chart-detail-dependency.component';
-import { ChartDetailValueComponent } from './chart-detail/chart-detail-value.component';
-
-export * from "./helm-chart.component";
-export * from "./versions/helm-chart-version.component";
-export * from "./chart-detail/chart-detail.component";
-export * from "./chart-detail/chart-detail-summary.component";
-export * from "./chart-detail/chart-detail-dependency.component";
-export * from "./chart-detail/chart-detail-value.component";
-
-export const HELMCHART_DIRECTIVE: Type<any>[] = [
-    HelmChartComponent,
-    ChartVersionComponent,
-    ChartDetailComponent,
-    ChartDetailSummaryComponent,
-    ChartDetailDependencyComponent,
-    ChartDetailValueComponent,
-];

src/portal/lib/src/index.ts

@@ -25,5 +25,4 @@ export * from './gridview/index';
 export * from './repository-gridview/index';
 export * from './operation/index';
 export * from './_animations/index';
-export * from './helm-chart/index';
 

src/portal/lib/src/label/index.ts

@@ -1,12 +1,8 @@
 import { Type } from '@angular/core';
 import { LabelComponent} from "./label.component";
-import { LabelMarkerComponent } from './label-marker/label-marker.component';
 import { LabelSignPostComponent } from './label-signpost/label-signpost.component';
-import { LabelFilterComponent } from './label-filter/label-filter.component';
 
 export const LABEL_DIRECTIVES: Type<any>[] = [
   LabelComponent,
-  LabelMarkerComponent,
   LabelSignPostComponent,
-  LabelFilterComponent
 ];

src/portal/lib/src/service/index.ts

@@ -11,7 +11,6 @@ export * from "./configuration.service";
 export * from "./job-log.service";
 export * from "./project.service";
 export * from "./label.service";
-export * from "./helm-chart.service";
 export * from "./retag.service";
 export * from "./permission.service";
 export * from "./permission-static";

src/portal/lib/src/service/interface.ts

@@ -300,93 +300,6 @@ export interface ScrollPosition {
   sT: number;
   cH: number;
 }
-export interface HelmChartSearchResultItem {
-  Name: string;
-  Score: number;
-  Chart: HelmChartVersion;
-}
-export interface HelmChartItem {
-  name: string;
-  total_versions: number;
-  latest_version: string;
-  created: string;
-  updated: string;
-  icon: string;
-  home: string;
-  deprecated?: boolean;
-  status?: string;
-  pulls?: number;
-  maintainer?: string;
-}
-
-export interface HelmChartVersion {
-  name: string;
-  home: string;
-  sources: string[];
-  version: string;
-  description: string;
-  keywords: string[];
-  maintainers: HelmChartMaintainer[];
-  engine: string;
-  icon: string;
-  appVersion: string;
-  apiVersion: string;
-  urls: string[];
-  created: string;
-  digest: string;
-  labels: Label[];
-  deprecated?: boolean;
-}
-
-export interface HelmChartDetail {
-  metadata: HelmChartMetaData;
-  dependencies: HelmChartDependency[];
-  values: any;
-  files: HelmchartFile;
-  security: HelmChartSecurity;
-  labels: Label[];
-}
-
-export interface HelmChartMetaData {
-  name: string;
-  home: string;
-  sources: string[];
-  version: string;
-  description: string;
-  keywords: string[];
-  maintainers: HelmChartMaintainer[];
-  engine: string;
-  icon: string;
-  appVersion: string;
-  urls: string[];
-  created?: string;
-  digest: string;
-}
-
-export interface HelmChartMaintainer {
-  name: string;
-  email: string;
-}
-
-export interface HelmChartDependency {
-  name: string;
-  version: string;
-  repository: string;
-}
-
-export interface HelmchartFile {
-  "README.MD": string;
-  "values.yaml": string;
-}
-
-export interface HelmChartSecurity {
-  signature: HelmChartSignature;
-}
-
-export interface HelmChartSignature {
-  signed: boolean;
-  prov_file: string;
-}
 
 /**
  * The manifest of image.

src/portal/lib/src/shared/shared.const.ts

@@ -94,7 +94,6 @@ export const LabelColor = [
 export const RoleMapping = { 'projectAdmin': 'MEMBER.PROJECT_ADMIN', 'master': 'MEMBER.PROJECT_MASTER',
 'developer': 'MEMBER.DEVELOPER', 'guest': 'MEMBER.GUEST' };
 
-export const DefaultHelmIcon = '/images/helm-gray.svg';
 
 export enum Roles {
   PROJECT_ADMIN = 1,

src/portal/src/app/base/global-search/search-results.ts

@@ -12,7 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { Project } from "../../project/project";
-import { Repository, HelmChartSearchResultItem } from "@harbor/ui";
+import { Repository } from "@harbor/ui";
+import { HelmChartSearchResultItem } from "../../project/helm-chart/helm-chart.interface.service";
 
 export class SearchResults {
   constructor() {

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

@@ -48,9 +48,9 @@ import { RobotAccountComponent } from './project/robot-account/robot-account.com
 import { ProjectLabelComponent } from "./project/project-label/project-label.component";
 import { ProjectConfigComponent } from './project/project-config/project-config.component';
 import { ProjectRoutingResolver } from './project/project-routing-resolver.service';
-import { ListChartsComponent } from './project/list-charts/list-charts.component';
-import { ListChartVersionsComponent } from './project/list-chart-versions/list-chart-versions.component';
-import { ChartDetailComponent } from './project/chart-detail/chart-detail.component';
+import { ListChartsComponent } from './project/helm-chart/list-charts.component';
+import { ListChartVersionsComponent } from './project/helm-chart/list-chart-versions/list-chart-versions.component';
+import { HelmChartDetailComponent } from './project/helm-chart/helm-chart-detail/chart-detail.component';
 
 const harborRoutes: Routes = [
   { path: '', redirectTo: 'harbor', pathMatch: 'full' },
@@ -134,7 +134,7 @@ const harborRoutes: Routes = [
       },
       {
         path: 'projects/:id/helm-charts/:chart/versions/:version',
-        component: ChartDetailComponent,
+        component: HelmChartDetailComponent,
         canActivate: [MemberGuard],
         resolve: {
           projectResolver: ProjectRoutingResolver

src/portal/src/app/project/helm-chart/helm-chart-detail/chart-detail.component.spec.ts

@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ChartDetailComponent } from './chart-detail.component';
+import { HelmChartDetailComponent } from './chart-detail.component';
 
 describe('ChartDetailComponent', () => {
-  let component: ChartDetailComponent;
-  let fixture: ComponentFixture<ChartDetailComponent>;
+  let component: HelmChartDetailComponent;
+  let fixture: ComponentFixture<HelmChartDetailComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ChartDetailComponent ]
+      declarations: [ HelmChartDetailComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(ChartDetailComponent);
+    fixture = TestBed.createComponent(HelmChartDetailComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/portal/src/app/project/helm-chart/helm-chart-detail/chart-detail.component.ts

@@ -1,9 +1,9 @@
-import { RoleMapping } from './../../shared/shared.const';
+import { RoleMapping } from './../../../shared/shared.const';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Component, OnInit } from "@angular/core";
-import { Project } from '../project';
-import { SessionService } from './../../shared/session.service';
-import { SessionUser } from './../../shared/session-user';
+import { Project } from '../../project';
+import { SessionService } from './../../../shared/session.service';
+import { SessionUser } from './../../../shared/session-user';
 import {finalize} from "rxjs/operators";
 
 @Component({
@@ -11,7 +11,7 @@ import {finalize} from "rxjs/operators";
   templateUrl: "./chart-detail.component.html",
   styleUrls: ["./chart-detail.component.scss"]
 })
-export class ChartDetailComponent implements OnInit {
+export class HelmChartDetailComponent implements OnInit {
 
   projectId: number | string;
   project: Project;

src/portal/src/app/project/helm-chart/helm-chart-detail/chart-detail/chart-detail-dependency.component.ts

@@ -5,7 +5,7 @@ import {
   ChangeDetectionStrategy
 } from "@angular/core";
 
-import { HelmChartDependency } from "./../../service/interface";
+import { HelmChartDependency } from "./../../helm-chart.interface.service";
 
 @Component({
   selector: "hbr-chart-detail-dependency",

src/portal/src/app/project/helm-chart/helm-chart-detail/chart-detail/chart-detail-summary.component.ts

@@ -5,10 +5,9 @@ import {
   Input
 } from "@angular/core";
 
-import { HelmChartMetaData, HelmChartSecurity, Label } from "./../../service/interface";
-import { downloadFile } from './../../utils';
-import { HelmChartService } from "../../service/index";
-import { ErrorHandler } from "./../../error-handler/error-handler";
+import { HelmChartMetaData, HelmChartSecurity } from "./../../helm-chart.interface.service";
+import { downloadFile, Label, ErrorHandler } from '@harbor/ui';
+import { HelmChartService } from "../../helm-chart.service";
 
 @Component({
   selector: "hbr-chart-detail-summary",

src/portal/src/app/project/helm-chart/helm-chart-detail/chart-detail/chart-detail.component.scss

@@ -1,4 +1,4 @@
-@import "../../mixin";
+@import "./../../../../../../lib/src/mixin";
 
 .title-container {
     display: flex;

src/portal/src/app/project/helm-chart/helm-chart-detail/chart-detail/chart-detail.component.ts

@@ -1,4 +1,4 @@
-import { Project } from "./../../project-policy-config/project";
+import { downloadFile, SystemInfoService, SystemInfo, ErrorHandler } from "@harbor/ui";
 import {
   Component,
   OnInit,
@@ -7,10 +7,9 @@ import {
   ChangeDetectorRef
 } from "@angular/core";
 
-import { downloadFile } from "../../utils";
-import { SystemInfoService, HelmChartService } from "../../service/index";
-import { HelmChartDetail, SystemInfo } from "./../../service/interface";
-import { ErrorHandler } from "./../../error-handler/error-handler";
+import { Project } from "../../../project";
+import { HelmChartService } from "../../helm-chart.service";
+import { HelmChartDetail } from "../../helm-chart.interface.service";
 import { finalize } from "rxjs/operators";
 
 @Component({
@@ -40,7 +39,7 @@ export class ChartDetailComponent implements OnInit {
     private systemInfoService: SystemInfoService,
     private helmChartService: HelmChartService,
     private cdr: ChangeDetectorRef
-  ) {}
+  ) { }
 
   ngOnInit(): void {
     this.systemInfoService.getSystemInfo()

src/portal/src/app/project/helm-chart/helm-chart.interface.service.ts

@@ -0,0 +1,91 @@
+import { Type } from '@angular/core';
+
+import { Label } from '@harbor/ui';
+
+export interface HelmChartSearchResultItem {
+    Name: string;
+    Score: number;
+    Chart: HelmChartVersion;
+}
+export interface HelmChartItem {
+    name: string;
+    total_versions: number;
+    latest_version: string;
+    created: string;
+    updated: string;
+    icon: string;
+    home: string;
+    deprecated?: boolean;
+    status?: string;
+    pulls?: number;
+    maintainer?: string;
+}
+
+export interface HelmChartVersion {
+    name: string;
+    home: string;
+    sources: string[];
+    version: string;
+    description: string;
+    keywords: string[];
+    maintainers: HelmChartMaintainer[];
+    engine: string;
+    icon: string;
+    appVersion: string;
+    apiVersion: string;
+    urls: string[];
+    created: string;
+    digest: string;
+    labels: Label[];
+    deprecated?: boolean;
+}
+
+export interface HelmChartDetail {
+    metadata: HelmChartMetaData;
+    dependencies: HelmChartDependency[];
+    values: any;
+    files: HelmchartFile;
+    security: HelmChartSecurity;
+    labels: Label[];
+}
+
+export interface HelmChartMetaData {
+    name: string;
+    home: string;
+    sources: string[];
+    version: string;
+    description: string;
+    keywords: string[];
+    maintainers: HelmChartMaintainer[];
+    engine: string;
+    icon: string;
+    appVersion: string;
+    urls: string[];
+    created?: string;
+    digest: string;
+}
+
+export interface HelmChartMaintainer {
+    name: string;
+    email: string;
+}
+
+export interface HelmChartDependency {
+    name: string;
+    version: string;
+    repository: string;
+}
+
+export interface HelmchartFile {
+    "README.MD": string;
+    "values.yaml": string;
+}
+
+export interface HelmChartSecurity {
+    signature: HelmChartSignature;
+}
+
+export interface HelmChartSignature {
+    signed: boolean;
+    prov_file: string;
+}

src/portal/src/app/project/helm-chart/helm-chart.module.ts

@@ -0,0 +1,60 @@
+// Copyright Project Harbor Authors
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//    http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { NgModule } from '@angular/core';
+import { LabelFilterComponent } from './label-filter/label-filter.component';
+import { LabelMarkerComponent } from './label-marker/label-marker.component';
+import { ListChartVersionsComponent } from './list-chart-versions/list-chart-versions.component';
+import { ChartVersionComponent } from './list-chart-versions/helm-chart-versions-detail/helm-chart-version.component';
+import { ListChartsComponent } from './list-charts.component';
+import { HelmChartComponent } from './list-charts-detail/helm-chart.component';
+import { ChartDetailDependencyComponent } from './helm-chart-detail/chart-detail/chart-detail-dependency.component';
+import { ChartDetailSummaryComponent } from './helm-chart-detail/chart-detail/chart-detail-summary.component';
+import { ChartDetailValueComponent } from './helm-chart-detail/chart-detail/chart-detail-value.component';
+import { ChartDetailComponent } from './helm-chart-detail/chart-detail/chart-detail.component';
+import { HelmChartDetailComponent } from './helm-chart-detail/chart-detail.component';
+import { SharedModule } from '../../shared/shared.module';
+import { HelmChartDefaultService, HelmChartService } from './helm-chart.service';
+
+@NgModule({
+    imports: [SharedModule],
+    declarations: [
+        LabelFilterComponent,
+        LabelMarkerComponent,
+        ListChartVersionsComponent,
+        ChartVersionComponent,
+        ListChartsComponent,
+        HelmChartComponent,
+        ChartDetailDependencyComponent,
+        ChartDetailSummaryComponent,
+        ChartDetailValueComponent,
+        ChartDetailComponent,
+        HelmChartDetailComponent,
+    ],
+    providers: [
+        { provide: HelmChartService, useClass: HelmChartDefaultService }],
+    exports: [
+        LabelFilterComponent,
+        LabelMarkerComponent,
+        ListChartVersionsComponent,
+        ChartVersionComponent,
+        ListChartsComponent,
+        HelmChartComponent,
+        ChartDetailDependencyComponent,
+        ChartDetailSummaryComponent,
+        ChartDetailValueComponent,
+        ChartDetailComponent,
+        HelmChartDetailComponent
+    ]
+})
+export class HelmChartModule { }

src/portal/src/app/project/helm-chart/helm-chart.service.ts

@@ -5,10 +5,8 @@ import { Http, Response, ResponseContentType } from "@angular/http";
 import { map, catchError } from "rxjs/operators";
 import {HttpErrorResponse} from "@angular/common/http";
 
-import { RequestQueryParams } from "./RequestQueryParams";
-import { HelmChartItem, HelmChartVersion, HelmChartDetail } from "./interface";
-import { SERVICE_CONFIG, IServiceConfig } from "../service.config";
-import { HTTP_JSON_OPTIONS, HTTP_GET_OPTIONS } from "../utils";
+import { HelmChartItem, HelmChartVersion, HelmChartDetail } from "./helm-chart.interface.service";
+import { HTTP_JSON_OPTIONS, HTTP_GET_OPTIONS, SERVICE_CONFIG, IServiceConfig, RequestQueryParams } from "@harbor/ui";
 
 
 /**

src/portal/src/app/project/helm-chart/label-filter/label-filter.component.ts

@@ -3,9 +3,9 @@ import {ClrDatagridFilterInterface} from "@clr/angular";
 import { fromEvent } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 
-import { Label, Tag } from './../../service/interface';
-import { HelmChartVersion } from '../../service/interface';
-import { ResourceType } from '../../shared/shared.const';
+import { Label, Tag } from '@harbor/ui';
+import { HelmChartVersion } from '../helm-chart.interface.service';
+import { ResourceType } from '../../../shared/shared.const';
 
 @Component({
     selector: "hbr-chart-version-label-filter",

src/portal/src/app/project/helm-chart/label-marker/label-marker.component.ts

@@ -2,11 +2,9 @@ import { Component, Input, Output, OnInit, EventEmitter, ChangeDetectorRef, View
 import { fromEvent, Subject } from 'rxjs';
 import { debounceTime, finalize } from 'rxjs/operators';
 
-import { RepositoryItem, HelmChartVersion } from './../../service/interface';
-import {Label} from "../../service/interface";
-import { ResourceType } from '../../shared/shared.const';
-import { LabelService } from '../../service/label.service';
-import { ErrorHandler } from '../../error-handler/error-handler';
+import { HelmChartVersion } from '../helm-chart.interface.service';
+import { Label, LabelService, ErrorHandler } from '@harbor/ui';
+import { ResourceType } from '../../../shared/shared.const';
 
 @Component({
     selector: 'hbr-resource-label-marker',
@@ -18,7 +16,7 @@ export class LabelMarkerComponent implements OnInit {
 
     @Input() labels: Label[] = [];
     @Input() projectName: string;
-    @Input() resource: RepositoryItem | HelmChartVersion;
+    @Input() resource: HelmChartVersion;
     @Input() resourceType: ResourceType;
     @Input() addLabelHeaders: string;
     @Output() changeEvt = new EventEmitter<any>();
@@ -38,8 +36,8 @@ export class LabelMarkerComponent implements OnInit {
         this.sortedLabels = this.labels;
         this.refresh();
         fromEvent(this.filterInputRef.nativeElement, 'keyup')
-        .pipe(debounceTime(500))
-        .subscribe(() => this.refresh());
+            .pipe(debounceTime(500))
+            .subscribe(() => this.refresh());
 
         this.labelChangeDebouncer.pipe(debounceTime(1000)).subscribe(() => this.changeEvt.emit());
     }
@@ -47,7 +45,7 @@ export class LabelMarkerComponent implements OnInit {
     constructor(
         private labelService: LabelService,
         private errorHandler: ErrorHandler,
-        private cdr: ChangeDetectorRef) {}
+        private cdr: ChangeDetectorRef) { }
 
     refresh() {
         this.loading = true;
@@ -56,17 +54,17 @@ export class LabelMarkerComponent implements OnInit {
                 this.projectName,
                 this.resource.name,
                 (this.resource as HelmChartVersion).version)
-            .pipe(finalize(() => {
+                .pipe(finalize(() => {
                     this.loading = false;
                     let hnd = setInterval(() => this.cdr.markForCheck(), 100);
                     setTimeout(() => clearInterval(hnd), 2000);
-                  }))
-            .subscribe( chartVersionLabels => {
-                for (let label of chartVersionLabels) {
-                    this.markedMap.set(label.id, true);
-                }
-                this.sortedLabels = this.getSortedLabels();
-            });
+                }))
+                .subscribe(chartVersionLabels => {
+                    for (let label of chartVersionLabels) {
+                        this.markedMap.set(label.id, true);
+                    }
+                    this.sortedLabels = this.getSortedLabels();
+                });
         }
     }
 
@@ -133,15 +131,15 @@ export class LabelMarkerComponent implements OnInit {
     }
 
     getSortedLabels(): Label[] {
-        return this.labels.filter( l => l.name.includes(this.labelFilter))
-        .sort((a, b) => {
-            if (this.isMarked(a) && !this.isMarked(b)) {
-                return -1;
-            } else if (!this.isMarked(a) && this.isMarked(b)) {
-                return 1;
-            } else {
-                return a.name < b.name ? -1 : a.name > b.name ? 1 : 0;
-            }
-        });
+        return this.labels.filter(l => l.name.includes(this.labelFilter))
+            .sort((a, b) => {
+                if (this.isMarked(a) && !this.isMarked(b)) {
+                    return -1;
+                } else if (!this.isMarked(a) && this.isMarked(b)) {
+                    return 1;
+                } else {
+                    return a.name < b.name ? -1 : a.name > b.name ? 1 : 0;
+                }
+            });
     }
 }

src/portal/src/app/project/helm-chart/list-chart-versions/helm-chart-versions-detail/helm-chart-version.component.scss

@@ -1,4 +1,4 @@
-@import "../../mixin";
+@import "../../../../../../lib/src/mixin";
 
 .title-container {
     display: flex;

src/portal/src/app/project/helm-chart/list-chart-versions/helm-chart-versions-detail/helm-chart-version.component.ts

@@ -12,28 +12,27 @@ import { Observable, forkJoin } from "rxjs";
 import { finalize, map } from "rxjs/operators";
 
 import { TranslateService } from "@ngx-translate/core";
-import { State } from "../../service/interface";
-
-import {
+import { State,
   SystemInfo,
+  Label,
+  ErrorHandler,
+  DEFAULT_PAGE_SIZE,
+  downloadFile,
   SystemInfoService,
-  HelmChartVersion,
-  HelmChartMaintainer,
-  LabelService
-} from "./../../service/index";
-import { Label } from './../../service/interface';
-import { ErrorHandler } from "./../../error-handler/error-handler";
-import { DEFAULT_PAGE_SIZE, downloadFile } from "../../utils";
-import { OperationService } from "./../../operation/operation.service";
-import { HelmChartService } from "./../../service/helm-chart.service";
-import { UserPermissionService } from "../../service/permission.service";
-import { USERSTATICPERMISSION } from "../../service/permission-static";
-import { ConfirmationAcknowledgement, ConfirmationDialogComponent, ConfirmationMessage } from "./../../confirmation-dialog";
-import {
+  LabelService,
   OperateInfo,
   OperationState,
-  operateChanges
-} from "./../../operation/operate";
+  operateChanges,
+  OperationService,
+  UserPermissionService,
+  USERSTATICPERMISSION } from "@harbor/ui";
+
+import { HelmChartVersion, HelmChartMaintainer } from "../../helm-chart.interface.service";
+import { HelmChartService } from "../../helm-chart.service";
+import { ConfirmationAcknowledgement } from "./../../../../shared/confirmation-dialog/confirmation-state-message";
+import { ConfirmationDialogComponent } from "./../../../../shared/confirmation-dialog/confirmation-dialog.component";
+import { ConfirmationMessage } from "./../../../../shared/confirmation-dialog/confirmation-message";
+
 import {
   ConfirmationButtons,
   ConfirmationTargets,
@@ -41,7 +40,7 @@ import {
   DefaultHelmIcon,
   ResourceType,
   Roles
-} from "../../shared/shared.const";
+} from "../../../../shared/shared.const";
 
 @Component({
   selector: "hbr-helm-chart-version",
@@ -284,7 +283,7 @@ export class ChartVersionComponent implements OnInit {
       ConfirmationTargets.HELM_CHART_VERSION,
       ConfirmationButtons.DELETE_CANCEL
     );
-    this.confirmationDialog.open(message);
+    this.confirmationDialog.openMessage(message);
     let hnd = setInterval(() => this.cdr.markForCheck(), 100);
     setTimeout(() => clearInterval(hnd), 2000);
   }

src/portal/src/app/project/helm-chart/list-chart-versions/list-chart-versions.component.ts

@@ -2,9 +2,9 @@ import { Router } from '@angular/router';
 import { ActivatedRoute } from '@angular/router';
 import { Component, OnInit } from '@angular/core';
 
-import { Project } from './../project';
-import { SessionUser } from './../../shared/session-user';
-import { SessionService } from './../../shared/session.service';
+import { Project } from './../../project';
+import { SessionUser } from './../../../shared/session-user';
+import { SessionService } from './../../../shared/session.service';
 
 @Component({
   selector: 'list-chart-version',

src/portal/src/app/project/helm-chart/list-charts-detail/helm-chart.component.scss

@@ -1,4 +1,4 @@
-@import "../mixin";
+@import "../../../../../lib/src/mixin";
 $size24:24px;
 $size60:60px;
 

src/portal/src/app/project/helm-chart/list-charts-detail/helm-chart.component.ts

@@ -10,29 +10,24 @@ import {
 } from "@angular/core";
 import { NgForm } from '@angular/forms';
 import { TranslateService } from "@ngx-translate/core";
-import { State } from "../service/interface";
+import {
+  State, ErrorHandler, SystemInfo, SystemInfoService, DEFAULT_PAGE_SIZE, downloadFile
+  , OperationService, UserPermissionService, USERSTATICPERMISSION, OperateInfo, OperationState, operateChanges
+} from "@harbor/ui";
 import { forkJoin, throwError, Observable } from "rxjs";
 import { finalize, map, catchError } from "rxjs/operators";
-import { SystemInfo, SystemInfoService, HelmChartItem } from "../service/index";
-import { ErrorHandler } from "../error-handler/error-handler";
-import { DEFAULT_PAGE_SIZE, downloadFile } from "../utils";
-import { HelmChartService } from "../service/helm-chart.service";
-import { DefaultHelmIcon } from "../shared/shared.const";
-import { Roles } from './../shared/shared.const';
-import { OperationService } from "./../operation/operation.service";
-import { UserPermissionService } from "../service/permission.service";
-import { USERSTATICPERMISSION } from "../service/permission-static";
-import {
-  OperateInfo,
-  OperationState,
-  operateChanges
-} from "./../operation/operate";
-import { ConfirmationAcknowledgement, ConfirmationDialogComponent, ConfirmationMessage } from "./../confirmation-dialog";
+import { HelmChartItem } from "../helm-chart.interface.service";
+import { HelmChartService } from "../helm-chart.service";
+import { DefaultHelmIcon, Roles } from "../../../shared/shared.const";
+
+import { ConfirmationAcknowledgement } from "../../../shared/confirmation-dialog/confirmation-state-message";
+import {  ConfirmationDialogComponent } from "../../../shared/confirmation-dialog/confirmation-dialog.component";
+import { ConfirmationMessage } from "../../../shared/confirmation-dialog/confirmation-message";
 import {
   ConfirmationButtons,
   ConfirmationTargets,
   ConfirmationState,
-} from "./../shared/shared.const";
+} from "../../../shared/shared.const";
 
 @Component({
   selector: "hbr-helm-chart",
@@ -98,7 +93,7 @@ export class HelmChartComponent implements OnInit {
     // Get system info for tag views
     this.systemInfoService.getSystemInfo()
       .subscribe(systemInfo => (this.systemInfo = systemInfo)
-      , error => this.errorHandler.error(error));
+        , error => this.errorHandler.error(error));
     this.lastFilteredChartName = "";
     this.refresh();
     this.getHelmPermissionRule(this.projectId);
@@ -263,7 +258,7 @@ export class HelmChartComponent implements OnInit {
       ConfirmationTargets.HELM_CHART,
       ConfirmationButtons.DELETE_CANCEL
     );
-    this.confirmationDialog.open(message);
+    this.confirmationDialog.openMessage(message);
   }
 
   confirmDeletion(message: ConfirmationAcknowledgement) {

src/portal/src/app/project/project.module.ts

@@ -35,9 +35,7 @@ import { ProjectRoutingResolver } from './project-routing-resolver.service';
 
 import { TargetExistsValidatorDirective } from '../shared/target-exists-directive';
 import { ProjectLabelComponent } from "../project/project-label/project-label.component";
-import { ListChartsComponent } from './list-charts/list-charts.component';
-import { ListChartVersionsComponent } from './list-chart-versions/list-chart-versions.component';
-import { ChartDetailComponent } from './chart-detail/chart-detail.component';
+import { HelmChartModule } from './helm-chart/helm-chart.module';
 import { RobotAccountComponent } from './robot-account/robot-account.component';
 import { AddRobotComponent } from './robot-account/add-robot/add-robot.component';
 
@@ -47,7 +45,8 @@ import { AddRobotComponent } from './robot-account/add-robot/add-robot.component
     RepositoryModule,
     ReplicationModule,
     LogModule,
-    RouterModule
+    RouterModule,
+    HelmChartModule
   ],
   declarations: [
     ProjectComponent,
@@ -59,9 +58,6 @@ import { AddRobotComponent } from './robot-account/add-robot/add-robot.component
     TargetExistsValidatorDirective,
     ProjectLabelComponent,
     AddGroupComponent,
-    ListChartsComponent,
-    ListChartVersionsComponent,
-    ChartDetailComponent,
     RobotAccountComponent,
     AddRobotComponent
   ],

src/portal/src/app/shared/confirmation-dialog/confirmation-dialog.component.ts

@@ -58,6 +58,17 @@ export class ConfirmationDialogComponent implements OnDestroy {
     open(): void {
         this.opened = true;
     }
+    openMessage(msg: ConfirmationMessage): void {
+        this.dialogTitle = msg.title;
+        this.message = msg;
+        this.translate.get(this.dialogTitle).subscribe((res: string) => this.dialogTitle = res);
+        this.translate.get(msg.message, { 'param': msg.param }).subscribe((res: string) => {
+            this.dialogContent = res;
+        });
+        // Open dialog
+        this.buttons = msg.buttons;
+        this.opened = true;
+    }
 
     close(): void {
         this.opened = false;

src/portal/src/app/shared/list-chart-version-ro/list-chart-version-ro.component.ts

@@ -2,7 +2,7 @@ import { extractJson } from './../shared.utils';
 import { Router } from '@angular/router';
 import { Component, OnInit, Input } from '@angular/core';
 
-import { HelmChartSearchResultItem, HelmChartVersion, HelmChartMaintainer } from '@harbor/ui';
+import { HelmChartSearchResultItem, HelmChartVersion, HelmChartMaintainer } from '../../project/helm-chart/helm-chart.interface.service';
 
 import { SearchTriggerService } from '../../base/global-search/search-trigger.service';
 import { ProjectService } from '../../project/project.service';

src/portal/src/app/shared/route/auth-user-activate.service.ts

@@ -78,7 +78,7 @@ export class AuthCheckGuard implements CanActivate, CanActivateChild {
             if (this.isGuest(route, state)) {
               return observer.next(true);
             }
-            // Session retrieving failed.pipe(map redirect to sign-in
+            // Session retrieving failed then redirect to sign-in
             // no matter what status code is.
             // Please pay attention that route 'HARBOR_ROOT' and 'EMBEDDED_SIGN_IN' support anonymous user
             if (state.url !== CommonRoutes.HARBOR_ROOT && !state.url.startsWith(CommonRoutes.EMBEDDED_SIGN_IN)) {

src/portal/src/app/shared/shared.const.ts

@@ -44,7 +44,9 @@ export const enum ConfirmationTargets {
   TAG,
   CONFIG,
   CONFIG_ROUTE,
-  CONFIG_TAB
+  CONFIG_TAB,
+  HELM_CHART,
+  HELM_CHART_VERSION
 }
 
 export const enum ActionType {
@@ -95,3 +97,9 @@ export enum Roles {
   GUEST = 3,
   OTHER = 0,
 }
+export const DefaultHelmIcon = '/images/helm-gray.svg';
+export enum ResourceType {
+  REPOSITORY = 1,
+  CHART_VERSION = 2,
+  REPOSITORY_TAG = 3,
+}

src/portal/src/app/user/user.component.scss

@@ -37,8 +37,13 @@
     visibility: hidden !important;
 }
 .rightPos {
-    position: absolute; 
-    right: 20px; 
-    height:32px; 
+    position: absolute;
+    right: 20px;
+    height:32px;
     z-index: 100;
+}
+::ng-deep harbor-user{
+    >div{
+        position: relative;
+    }
 }