Commit a4118791 authored by AllForNothing's avatar AllForNothing
Browse files

Fix css bugs of label 'target2.0'


Signed-off-by: default avatarAllForNothing <sshijun@vmware.com>
parent 76625eab
......@@ -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(
......
......@@ -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>
......
......@@ -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;
}
}
\ No newline at end of file
......@@ -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);
}
}
}
......@@ -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>
......@@ -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;
}
}
}
}
......@@ -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);
}
}
......@@ -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
......
......@@ -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];
}
......
......@@ -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>
......
......@@ -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()
......
......@@ -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>
......
......@@ -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;
}
}
......@@ -37,7 +37,11 @@ export class ArtifactCommonPropertiesComponent implements OnInit, OnChanges {
for (let name in this.commonProperties) {
if (this.commonProperties.hasOwnProperty(name)) {
if (typeof (this.commonProperties[name]) === 'object') {
this.commonProperties[name] = JSON.stringify(this.commonProperties[name]);
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)
......
......@@ -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"
......
......@@ -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">
......
......@@ -291,4 +291,7 @@ hr {
}
.font-size-12 {
font-size: 12px;
}
.margin-right-5 {
margin-right: 5px;
}
\ No newline at end of file
......@@ -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>
......
......@@ -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>
......
......@@ -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>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment