Fix css bugs of label 'target2.0'

Signed-off-by: AllForNothing <sshijun@vmware.com>

src/portal/src/app/app.component.ts

@@ -20,7 +20,7 @@ import { CookieService } from 'ngx-cookie';
 import { SessionService } from './shared/session.service';
 import { AppConfigService } from './services/app-config.service';
 import { ThemeService } from './services/theme.service';
-import { themeArray, ThemeInterface } from './services/theme';
+import { THEME_ARRAY, ThemeInterface } from './services/theme';
 import { clone } from '../lib/utils/utils';
 
 const HAS_STYLE_MODE: string = 'styleModeLocal';
@@ -30,7 +30,7 @@ const HAS_STYLE_MODE: string = 'styleModeLocal';
     templateUrl: 'app.component.html'
 })
 export class AppComponent {
-    themeArray: ThemeInterface[] = clone(themeArray);
+    themeArray: ThemeInterface[] = clone(THEME_ARRAY);
 
     styleMode: string = this.themeArray[0].showStyle;
     constructor(

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

@@ -81,7 +81,17 @@
                 </clr-vertical-nav-group>
             </div>
             <div class="vertical-nav-footer">
-                <a clrVerticalNavLink target="_blank" routerLink="/devcenter">
+                <ng-container *ngFor="let theme of themeArray;let i=index">
+                    <ng-container *ngIf="theme.showStyle === styleMode">
+                        <a class="nav-link nav-icon theme-select"
+                           (click)="themeChanged(theme)">
+                            <clr-icon size="20" *ngIf="styleMode ==='DARK'" shape="sun" class="is-solid"></clr-icon>
+                            <clr-icon size="20" *ngIf="styleMode ==='LIGHT'" shape="moon" class="is-solid"></clr-icon>
+                            {{ theme.text | translate }}
+                        </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>

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

@@ -79,3 +79,23 @@ clr-vertical-nav {
 .right {
     text-align: right;
 }
+
+.theme-select {
+    width: 5.4rem;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    height: 100%;
+    font-size: 14px;
+    letter-spacing: 1px;
+    cursor: pointer;
+    &:hover {
+        opacity: 1;
+    }
+    clr-icon {
+        position: static;
+        transform: none;
+        margin-right: .2rem;
+        min-width: 20px;
+    }
+}

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

@@ -27,9 +27,13 @@ import { AboutDialogComponent } from '../../shared/about-dialog/about-dialog.com
 import { SearchTriggerService } from '../global-search/search-trigger.service';
 import { CommonRoutes } from "../../../lib/entities/shared.const";
 import { ConfigScannerService, SCANNERS_DOC } from "../../config/scanner/config-scanner.service";
+import { THEME_ARRAY, ThemeInterface } from "../../services/theme";
+import { clone } from "../../../lib/utils/utils";
+import { ThemeService } from "../../services/theme.service";
 
 const HAS_SHOWED_SCANNER_INFO: string = 'hasShowScannerInfo';
 const YES: string = 'yes';
+const HAS_STYLE_MODE: string = 'styleModeLocal';
 
 @Component({
     selector: 'harbor-shell',
@@ -62,13 +66,17 @@ export class HarborShellComponent implements OnInit, OnDestroy {
     isHttpAuthMode: boolean;
     showScannerInfo: boolean = false;
     scannerDocUrl: string = SCANNERS_DOC;
+    themeArray: ThemeInterface[] = clone(THEME_ARRAY);
+
+    styleMode = this.themeArray[0].showStyle;
     constructor(
         private route: ActivatedRoute,
         private router: Router,
         private session: SessionService,
         private searchTrigger: SearchTriggerService,
         private appConfigService: AppConfigService,
-        private scannerService: ConfigScannerService
+        private scannerService: ConfigScannerService,
+        public theme: ThemeService,
     ) { }
 
     ngOnInit() {
@@ -91,6 +99,10 @@ export class HarborShellComponent implements OnInit, OnDestroy {
         if (!(localStorage && localStorage.getItem(HAS_SHOWED_SCANNER_INFO) === YES)) {
             this.getDefaultScanner();
         }
+        // set local in app
+        if (localStorage) {
+            this.styleMode = localStorage.getItem(HAS_STYLE_MODE);
+        }
     }
     closeInfo() {
         if (localStorage) {
@@ -157,4 +169,11 @@ export class HarborShellComponent implements OnInit, OnDestroy {
                 break;
         }
     }
+    themeChanged(theme) {
+        this.styleMode = theme.mode;
+        this.theme.loadStyle(theme.toggleFileName);
+        if (localStorage) {
+            localStorage.setItem(HAS_STYLE_MODE, this.styleMode);
+        }
+    }
 }

src/portal/src/app/base/navigator/navigator.component.html

@@ -44,16 +44,5 @@
             </clr-dropdown-menu>
         </clr-dropdown>
         <a href="javascript:void(0)" id="aboutMenu" class="nav-link nav-text nav-about-link" (click)="openAboutDialog()" *ngIf="!isSessionValid">{{'ACCOUNT_SETTINGS.ABOUT' | translate}}</a>
-        <div class="nav-divider"></div>
-        <ng-container *ngFor="let theme of themeArray;let i=index">
-            <ng-container *ngIf="theme.showStyle === styleMode">
-                <a class="nav-link nav-icon theme-select"
-                    (click)="themeChanged(theme)">
-                    <clr-icon size="20" *ngIf="styleMode ==='DARK'" shape="sun" class="is-solid"></clr-icon>
-                    <clr-icon size="20" *ngIf="styleMode ==='LIGHT'" shape="moon" class="is-solid"></clr-icon>
-                    {{ theme.text | translate }}
-                </a>
-            </ng-container>
-        </ng-container>
     </div>
 </clr-header>

src/portal/src/app/base/navigator/navigator.component.scss

@@ -68,27 +68,3 @@
 .dropdown-lang {
     padding-right: 1.3rem;
 }
-.header {
-    .header-actions {
-        .theme-select {
-            width: 5.4rem;
-            display: flex;
-            align-items: center;
-            justify-content: flex-start;
-            height: 100%;
-            font-size: 14px;
-            letter-spacing: 1px;
-            cursor: pointer;
-            &:hover {
-                opacity: 1;
-            }
-            clr-icon {
-                position: static;
-                transform: none;
-                margin-right: .2rem;
-                min-width: 20px;
-            }
-        } 
-    } 
-}
-

src/portal/src/app/base/navigator/navigator.component.ts

@@ -26,10 +26,7 @@ import { SearchTriggerService } from '../global-search/search-trigger.service';
 import { MessageHandlerService } from '../../shared/message-handler/message-handler.service';
 import { SkinableConfig } from "../../services/skinable-config.service";
 import { CommonRoutes } from "../../../lib/entities/shared.const";
-import { ThemeInterface, themeArray } from '../../services/theme';
+
-import { clone } from '../../../lib/utils/utils';
-import { ThemeService } from '../../services/theme.service';
-const HAS_STYLE_MODE: string = 'styleModeLocal';
 
 @Component({
     selector: 'navigator',
@@ -46,9 +43,6 @@ export class NavigatorComponent implements OnInit {
     appTitle: string = 'APP_TITLE.HARBOR';
     customStyle: { [key: string]: any };
     customProjectName: { [key: string]: any };
-    themeArray: ThemeInterface[] = clone(themeArray);
-
-    styleMode = this.themeArray[0].showStyle;
     constructor(
         private session: SessionService,
         private router: Router,
@@ -58,7 +52,6 @@ export class NavigatorComponent implements OnInit {
         private appConfigService: AppConfigService,
         private msgHandler: MessageHandlerService,
         private searchTrigger: SearchTriggerService,
-        public theme: ThemeService,
         private skinableConfig: SkinableConfig) {
     }
 
@@ -86,8 +79,6 @@ export class NavigatorComponent implements OnInit {
         if (this.appConfigService.getConfig().read_only) {
             this.msgHandler.handleReadOnly();
         }
-        // set local in app
-        this.styleMode = localStorage.getItem(HAS_STYLE_MODE);
     }
 
     public get isSessionValid(): boolean {
@@ -196,10 +187,4 @@ export class NavigatorComponent implements OnInit {
     registryAction(): void {
         this.searchTrigger.closeSearch(true);
     }
-
-    themeChanged(theme) {
-        this.styleMode = theme.mode;
-        this.theme.loadStyle(theme.toggleFileName);
-        localStorage.setItem(HAS_STYLE_MODE, this.styleMode);
-    }
 }

src/portal/src/app/config/scanner/config-scanner.component.html

@@ -27,11 +27,11 @@
                                         [disabled]="!(selectedRow && !selectedRow.is_default)">
                                     <span *ngIf="selectedRow && selectedRow.disabled">
                                         <clr-icon class="margin-top-2" size="16" shape="success-standard"></clr-icon>
-                                        <span class="margin-left-10">{{'SCANNER.ENABLE' | translate}}</span>
+                                        <span class="margin-left-10">{{'WEBHOOK.ENABLED_BUTTON' | translate}}</span>
                                     </span>
                                     <span *ngIf="!(selectedRow && selectedRow.disabled)">
                                         <clr-icon class="margin-top-2" size="16" shape="ban"></clr-icon>
-                                        <span class="margin-left-10">{{'SCANNER.DISABLE' | translate}}</span>
+                                        <span class="margin-left-10">{{'WEBHOOK.DISABLED_BUTTON' | translate}}</span>
                                     </span>
                                 </button>
                                 <button clrDropdownItem

src/portal/src/app/project/repository/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.ts

@@ -916,7 +916,7 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
       });
   }
 
-  handleScanOverview(scanOverview: any): VulnerabilitySummary {
+  handleScanOverview(scanOverview: any): any {
     if (scanOverview) {
       return scanOverview[DEFAULT_SUPPORTED_MIME_TYPE];
     }

src/portal/src/app/project/repository/artifact/artifact-additions/artifact-additions.component.html

@@ -5,7 +5,7 @@
             <clr-tab *ngIf="getVulnerability()">
                 <button clrTabLink id="vulnerability">{{'REPOSITORY.VULNERABILITY' | translate}}</button>
                 <clr-tab-content id="vulnerability-content" *clrIfActive>
-                    <hbr-artifact-vulnerabilities  [projectName]="projectName"
+                    <hbr-artifact-vulnerabilities [artifact]="artifact"  [projectName]="projectName"
                                                    [projectId]="projectId"
                                                    [repoName]="repoName"
                                                    [digest]="digest" [vulnerabilitiesLink]="getVulnerability()"></hbr-artifact-vulnerabilities>

src/portal/src/app/project/repository/artifact/artifact-additions/artifact-additions.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, Input } from '@angular/core';
 import { ADDITIONS } from "./models";
 import { AdditionLinks } from "../../../../../../ng-swagger-gen/models/addition-links";
 import { AdditionLink } from "../../../../../../ng-swagger-gen/models/addition-link";
+import { Artifact } from "../../../../../../ng-swagger-gen/models/artifact";
 
 @Component({
   selector: 'artifact-additions',
@@ -9,6 +10,7 @@ import { AdditionLink } from "../../../../../../ng-swagger-gen/models/addition-l
   styleUrls: ['./artifact-additions.component.scss']
 })
 export class ArtifactAdditionsComponent implements OnInit {
+  @Input() artifact: Artifact;
   @Input() additionLinks: AdditionLinks;
   @Input() projectName: string;
   @Input()

src/portal/src/app/project/repository/artifact/artifact-additions/artifact-vulnerabilities/artifact-vulnerabilities.component.html

@@ -15,7 +15,7 @@
                     </div>
                     <div class="clr-col">
                         <div [hidden]="!shouldShowBar()">
-                            <hbr-vulnerability-bar [scanner]="scanner"
+                            <hbr-vulnerability-bar [summary]="handleScanOverview(artifact?.scan_overview)" [scanner]="scanner"
                                                    (submitFinish)="submitFinish($event)" [projectName]="projectName" [repoName]="repoName"
                                                    [artifactDigest]="digest">
                             </hbr-vulnerability-bar>

src/portal/src/app/project/repository/artifact/artifact-additions/artifact-vulnerabilities/artifact-vulnerabilities.component.ts

@@ -19,6 +19,7 @@ import {
 import { ChannelService } from "../../../../../../lib/services/channel.service";
 import { ResultBarChartComponent } from "../../../vulnerability-scanning/result-bar-chart.component";
 import { Subscription } from "rxjs";
+import { Artifact } from "../../../../../../../ng-swagger-gen/models/artifact";
 
 @Component({
   selector: 'hbr-artifact-vulnerabilities',
@@ -36,6 +37,7 @@ export class ArtifactVulnerabilitiesComponent implements OnInit, OnDestroy {
   repoName: string;
   @Input()
   digest: string;
+  @Input() artifact: Artifact;
   scan_overview: any;
   scanner: ScannerVo;
 
@@ -50,6 +52,7 @@ export class ArtifactVulnerabilitiesComponent implements OnInit, OnDestroy {
   @ViewChild(ResultBarChartComponent, {static: false})
   resultBarChartComponent: ResultBarChartComponent;
   sub: Subscription;
+  hasViewInitWithDelay: boolean = false;
   constructor(
     private errorHandler: ErrorHandler,
     private additionsService: AdditionsService,
@@ -74,6 +77,9 @@ export class ArtifactVulnerabilitiesComponent implements OnInit, OnDestroy {
         this.getVulnerabilities();
       });
     }
+    setTimeout(() => {
+      this.hasViewInitWithDelay = true;
+    }, 0);
   }
   ngOnDestroy() {
     if (this.sub) {
@@ -81,7 +87,6 @@ export class ArtifactVulnerabilitiesComponent implements OnInit, OnDestroy {
       this.sub = null;
     }
   }
-
   getVulnerabilities() {
     if (this.vulnerabilitiesLink
       && !this.vulnerabilitiesLink.absolute
@@ -173,7 +178,13 @@ export class ArtifactVulnerabilitiesComponent implements OnInit, OnDestroy {
     this.onSendingScanCommand = e;
   }
   shouldShowBar(): boolean {
-    return this.resultBarChartComponent
+    return this.hasViewInitWithDelay && this.resultBarChartComponent
       && (this.resultBarChartComponent.queued || this.resultBarChartComponent.scanning || this.resultBarChartComponent.error);
   }
+  handleScanOverview(scanOverview: any): any {
+    if (scanOverview) {
+      return scanOverview[DEFAULT_SUPPORTED_MIME_TYPE];
+    }
+    return null;
+  }
 }

src/portal/src/app/project/repository/artifact/artifact-common-properties/artifact-common-properties.component.ts

@@ -37,8 +37,12 @@ export class ArtifactCommonPropertiesComponent implements OnInit, OnChanges {
         for (let name in this.commonProperties) {
           if (this.commonProperties.hasOwnProperty(name)) {
             if (typeof (this.commonProperties[name]) === 'object') {
+              if (this.commonProperties[name] === null) {
+                this.commonProperties[name] = '';
+              } else {
                 this.commonProperties[name] = JSON.stringify(this.commonProperties[name]);
               }
+            }
             if (name === Types.CREATED) {
               this.commonProperties[name] = new DatePipe(this.translate.currentLang)
                 .transform(this.commonProperties[name], 'short');

src/portal/src/app/project/repository/artifact/artifact-summary.component.html

@@ -27,7 +27,7 @@
     <artifact-common-properties [artifactDetails]="artifact"></artifact-common-properties>
 
     <!-- Additions -->
-    <artifact-additions
+    <artifact-additions [artifact]="artifact"
             [projectName]="projectName"
             [projectId]="projectId"
             [repoName]="repositoryName"

src/portal/src/app/project/repository/vulnerability-scanning/result-tip-histogram/result-tip-histogram.component.html

@@ -30,28 +30,29 @@
         </div>
         <clr-tooltip-content class="w-800" [clrPosition]="'right'" [clrSize]="'lg'" *clrIfOpen>
             <div class="bar-tooltip-font-larger">
+                <div *ngIf="!isNone" class="level-border clr-display-inline-block margin-right-5">
+                    <div  [className]="getClass()">
+                        <div class="inner">
+                            {{vulnerabilitySummary?.severity | slice:0:1}}
+                        </div>
+                    </div>
+                </div>
                 <ng-container *ngIf="isCritical">
-                    <clr-icon shape="exclamation-circle" class="is-error" size="32"></clr-icon>
                     <span>{{'VULNERABILITY.OVERALL_SEVERITY' | translate }} <span class="font-weight-600">{{'VULNERABILITY.SEVERITY.CRITICAL' | translate | titlecase }}</span></span>
                 </ng-container>
                 <ng-container *ngIf="isHigh">
-                    <clr-icon shape="exclamation-triangle" class="is-error" size="32"></clr-icon>
                     <span>{{'VULNERABILITY.OVERALL_SEVERITY' | translate }} <span class="font-weight-600">{{'VULNERABILITY.SEVERITY.HIGH' | translate | titlecase }}</span></span>
                 </ng-container>
                 <ng-container *ngIf="isMedium">
-                    <clr-icon shape="minus-circle" class="tip-icon-medium" size="30"></clr-icon>
                     <span>{{'VULNERABILITY.OVERALL_SEVERITY' | translate }} <span class="font-weight-600">{{'VULNERABILITY.SEVERITY.MEDIUM' | translate | titlecase}}</span></span>
                 </ng-container>
                 <ng-container *ngIf="isLow">
-                    <clr-icon shape="info-circle" class="tip-icon-low" size="32"></clr-icon>
                     <span>{{'VULNERABILITY.OVERALL_SEVERITY' | translate }} <span class="font-weight-600">{{'VULNERABILITY.SEVERITY.LOW' | translate | titlecase }}</span></span>
                 </ng-container>
                 <ng-container *ngIf="isUnknown">
-                    <clr-icon shape="help" size="24" class="help-icon"></clr-icon>
                     <span>{{'VULNERABILITY.OVERALL_SEVERITY' | translate }} <span class="font-weight-600">{{'VULNERABILITY.SEVERITY.UNKNOWN' | translate | titlecase }}</span></span>
                 </ng-container>
                 <ng-container *ngIf="isNegligible">
-                    <clr-icon shape="circle" class="is-success" size="32"></clr-icon>
                     <span>{{'VULNERABILITY.OVERALL_SEVERITY' | translate }} <span class="font-weight-600">{{'VULNERABILITY.SEVERITY.NEGLIGIBLE' | translate | titlecase }}</span></span>
                 </ng-container>
                 <ng-container *ngIf="isNone">

src/portal/src/app/project/repository/vulnerability-scanning/result-tip-histogram/result-tip-histogram.component.scss

@@ -292,3 +292,6 @@ hr {
 .font-size-12 {
     font-size: 12px;
 }
+.margin-right-5 {
+    margin-right: 5px;
+}

src/portal/src/app/project/tag-feature-integration/immutable-tag/immutable-tag.component.html

@@ -52,9 +52,6 @@
             <div class="add-rule-btn">
                 <button [disabled]="rules?.length >= 15" id="add-rule" class="btn btn-primary " (click)="openAddRule()">{{'IMMUTABLE_TAG.ADD_RULE' | translate}}</button>
             </div>
-            <div class="clr-col-6 color-97 font-size-54">
-                {{'IMMUTABLE_TAG.ADD_RULE_HELP_1' | translate}}
-            </div>
         </div>
     </div>
 </div>

src/portal/src/app/project/tag-feature-integration/tag-retention/tag-retention.component.html

@@ -63,9 +63,6 @@
             <div class="flex-8p">
                 <button id="add-rule" [disabled]="retention?.rules?.length >= 15" class="btn btn-primary " (click)="openAddRule()">{{'TAG_RETENTION.ADD_RULE' | translate}}</button>
             </div>
-            <div class="clr-col-6 color-97 font-size-54">
-                {{'TAG_RETENTION.ADD_RULE_HELP_1' | translate}}
-            </div>
         </div>
     </div>
 </div>

src/portal/src/app/project/webhook/webhook.component.html

@@ -17,11 +17,11 @@
                                   <span id="toggle-webhook">
                                        <span *ngIf="selectedRow[0] && !selectedRow[0].enabled">
                                            <clr-icon class="margin-top-2" size="16" shape="success-standard"></clr-icon>
-                                           <span class="margin-left-10">{{'WEBHOOK.ENABLE' | translate}}</span>
+                                           <span class="margin-left-10">{{'WEBHOOK.ENABLED_BUTTON' | translate}}</span>
                                        </span>
                                        <span *ngIf="!(selectedRow[0] && !selectedRow[0].enabled)">
                                            <clr-icon class="margin-top-2" size="16" shape="ban"></clr-icon>
-                                          <span class="margin-left-10">{{'WEBHOOK.DISABLE' | translate}}</span>
+                                          <span class="margin-left-10">{{'WEBHOOK.DISABLED_BUTTON' | translate}}</span>
                                        </span>
                                   </span>
                             </button>

src/portal/src/app/project/webhook/webhook.component.scss

@@ -58,3 +58,6 @@
 .min-width-340 {
     min-width: 340px!important;
 }
+.margin-left-10 {
+    margin-left: 10px;
+}

src/portal/src/app/services/theme.ts

@@ -6,7 +6,7 @@ export interface ThemeInterface {
     toggleFileName: string;
 }
 
-export const themeArray: ThemeInterface[] = [
+export const THEME_ARRAY: ThemeInterface[] = [
     {
         showStyle: "DARK",
         mode: "LIGHT",

src/portal/src/css/common.scss

@@ -185,3 +185,6 @@ hbr-tag {
 
 }
 
+clr-header {
+  background-color: $header-color;
+}

src/portal/src/css/dark-theme.scss

@@ -24,5 +24,6 @@ $color-ddd: #21333b;
 $color-f2: none;
 $color-657b83: none;
 $color-fdf6e3:  none;
+$header-color: hsl(198, 100%, 15%)!important;
 
 @import "./common.scss";

src/portal/src/css/light-theme.scss

@@ -26,5 +26,6 @@ $color-ddd: #ddd;
 $color-f2: #f2f2f2;
 $color-657b83: #657b83;
 $color-fdf6e3:  #fdf6e3;
+$header-color: rgb(0, 74, 112);
 
 @import "./common.scss";

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

@@ -222,7 +222,7 @@
         "NAME_IS_ILLEGAL": "Project name is invalid.",
         "UNKNOWN_ERROR": "An unknown error occurred while creating the project.",
         "ITEMS": "items",
-        "DELETION_TITLE": "Confirm removal of project members",
+        "DELETION_TITLE": "Confirm remove project",
         "DELETION_SUMMARY": "Do you want to delete project {{param}}?",
         "FILTER_PLACEHOLDER": "Filter Projects",
         "REPLICATION_RULE": "Replication Rule",
@@ -468,7 +468,7 @@
         "MONTH": "Month",
         "DAY_MONTH": "Day of month",
         "DAY_WEEK": "Day of week",
-        "CRON-TITLE": "Pattern description for cron '* * * * * *'",
+        "CRON_TITLE": "Pattern description for cron '* * * * * *'.The cron string is based on UTC time",
         "FIELD_NAME": "Field name",
         "MANDATORY": "Mandatory?",
         "ALLOWED_VALUES": "Allowed values",

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

@@ -468,7 +468,7 @@
         "MONTH": "Month",
         "DAY_MONTH": "Day of month",
         "DAY_WEEK": "Day of week",
-        "CRON-TITLE": "Pattern description for cron '* * * * * *'",
+        "CRON_TITLE": "Pattern description for cron '* * * * * *'.The cron string is based on UTC time",
         "FIELD_NAME": "Field name",
         "MANDATORY": "Mandatory?",
         "ALLOWED_VALUES": "Allowed values",

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

@@ -460,7 +460,7 @@
         "MONTH": "Month",
         "DAY_MONTH": "Day of month",
         "DAY_WEEK": "Day of week",
-        "CRON-TITLE": "Pattern description for cron '* * * * * *'",
+        "CRON_TITLE": "Pattern description for cron '* * * * * *'.The cron string is based on UTC time",
         "FIELD_NAME": "Field name",
         "MANDATORY": "Mandatory?",
         "ALLOWED_VALUES": "Allowed values",

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

@@ -466,7 +466,7 @@
         "MONTH": "Month",
         "DAY_MONTH": "Day of month",
         "DAY_WEEK": "Day of week",
-        "CRON-TITLE": "Pattern description for cron '* * * * * *'",
+        "CRON_TITLE": "Pattern description for cron '* * * * * *'.The cron string is based on UTC time",
         "FIELD_NAME": "Field name",
         "MANDATORY": "Mandatory?",
         "ALLOWED_VALUES": "Allowed values",

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

@@ -468,7 +468,7 @@
         "MONTH": "Ay",
         "DAY_MONTH": "Ayın günü",
         "DAY_WEEK": "Ayın haftası",
-        "CRON-TITLE": "Cron için kalıp açıklaması '* * * * * *'",
+        "CRON_TITLE": "Cron için kalıp açıklaması '* * * * * *'.The cron string is based on UTC time",
         "FIELD_NAME": "Alan adı",
         "MANDATORY": "Zorunlu?",
         "ALLOWED_VALUES": "İzin verilen değerler",

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

@@ -467,7 +467,7 @@
         "MONTH": "月",
         "DAY_MONTH": "一个月的一天",
         "DAY_WEEK": "一周的一天",
-        "CRON-TITLE": "cron格式描述 '* * * * * *'",
+        "CRON_TITLE": "cron格式描述 '* * * * * *'。cron 基于 UTC 时间",
         "FIELD_NAME": "字段名称",
         "MANDATORY": "是否强制?",
         "ALLOWED_VALUES": "允许的值",

src/portal/src/lib/components/config/gc/gc.component.html

@@ -9,7 +9,7 @@
     </clr-checkbox-container>
 </form>
 <div class="cron-selection">
-    <cron-selection [labelCurrent]="getLabelCurrent" #CronScheduleComponent [labelEdit]='getText'
+    <cron-selection [buttonMarginLeft]="'200px'" [labelCurrent]="getLabelCurrent" #CronScheduleComponent [labelEdit]='getText'
                     [originCron]='originCron' (inputvalue)="scheduleGc($event)"></cron-selection>
     <button class="btn btn-outline  gc-start-btn" (click)="gcNow()"
             [disabled]="disableGC">{{'GC.GC_NOW' | translate}}</button>

src/portal/src/lib/components/cron-schedule/cron-schedule.component.scss

@@ -23,7 +23,7 @@
   .setting-wrapper {
     position: relative;
     .confirm-button {
-      margin: 20px 0 0;
+      margin: 11px 0 0;
     }
   
     *:not(:first-child) {

src/portal/src/lib/components/cron-schedule/cron-tooltip/cron-tooltip.component.html

@@ -1,7 +1,7 @@
 <table class="table table-noborder table-style table-tag">
     <caption class="table-title tag-thead">
       <span class="tag-header-color">
-        {{ 'REPLICATION.CRON-TITLE' | translate }}              
+        {{ 'REPLICATION.CRON_TITLE' | translate }}
       </span>
     </caption>
     <thead class="tag-thead">