Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2024-11-22 18:25:56 +01:00
Code Issues Projects Releases Wiki Activity

Improve components in UI library

Browse Source
This commit is contained in:
Steven Zou 2017-06-13 20:38:21 +08:00
parent 71f3480932
commit 1d543c9212
17 changed files with 137 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/ui_ng/lib/src/endpoint/endpoint.component.css.ts
View File

@ -1,10 +1,15 @@
export const ENDPOINT_STYLE: string = `
.option-left {
padding-left: 16px;
margin-top: 24px;
margin-top: -6px;
}
.option-right {
padding-right: 16px;
margin-top: 36px;
}
.refresh-btn {
cursor: pointer;
}
.refresh-btn:hover {
color: #007CBB;
}
`;

12
src/ui_ng/lib/src/endpoint/endpoint.component.html.ts
View File

@ -1,17 +1,17 @@
export const ENDPOINT_TEMPLATE: string = `
<confirmation-dialog #confirmationDialog (confirmAction)="confirmDeletion($event)"></confirmation-dialog>
<div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="row flex-items-xs-between">
<div class="row flex-items-xs-between" style="height: 24px;">
<div class="flex-items-xs-middle option-left">
<button class="btn btn-link" (click)="openModal()"><clr-icon shape="add"></clr-icon> {{'DESTINATION.ENDPOINT' | translate}}</button>
<create-edit-endpoint (reload)="reload($event)"></create-edit-endpoint>
</div>
<div class="flex-items-xs-middle option-right">
<hbr-filter filterPlaceholder='{{"REPLICATION.FILTER_TARGETS_PLACEHOLDER" | translate}}' (filter)="doSearchTargets($event)" [currentValue]="targetName"></hbr-filter>
<a href="javascript:void(0)" (click)="refreshTargets()">
<hbr-filter [withDivider]="true" filterPlaceholder='{{"REPLICATION.FILTER_TARGETS_PLACEHOLDER" | translate}}' (filter)="doSearchTargets($event)" [currentValue]="targetName"></hbr-filter>
<span class="refresh-btn" (click)="refreshTargets()">
<clr-icon shape="refresh"></clr-icon>
</a>
</span>
</div>
</div>
</div>
@ -37,4 +37,6 @@ export const ENDPOINT_TEMPLATE: string = `
</clr-datagrid>
</div>
</div>
<confirmation-dialog #confirmationDialog (confirmAction)="confirmDeletion($event)"></confirmation-dialog>
</div>
`;

15
src/ui_ng/lib/src/filter/filter.component.ts
View File

@ -31,6 +31,7 @@ export class FilterComponent implements OnInit {
placeHolder: string = "";
filterTerms = new Subject<string>();
isExpanded: boolean = false;
@Output("filter") private filterEvt = new EventEmitter<string>();
@ -39,6 +40,8 @@ export class FilterComponent implements OnInit {
public set flPlaceholder(placeHolder: string) {
this.placeHolder = placeHolder;
}
@Input() expandMode: boolean = false;
@Input() withDivider: boolean = false;
ngOnInit(): void {
this.filterTerms
@ -54,4 +57,16 @@ export class FilterComponent implements OnInit {
//Send out filter terms
this.filterTerms.next(this.currentValue.trim());
}
onClick(): void {
//Only enabled when expandMode is set to false
if(this.expandMode){
return;
}
this.isExpanded = !this.isExpanded;
}
public get isShowSearchBox(): boolean {
return this.expandMode || (!this.expandMode && this.isExpanded);
}
}

26
src/ui_ng/lib/src/filter/filter.template.ts
View File

@ -4,8 +4,9 @@
export const FILTER_TEMPLATE: string = `
<span>
<clr-icon shape="filter" size="12" class="is-solid filter-icon"></clr-icon>
<input type="text" style="padding-left: 15px;" (keyup)="valueChange()" placeholder="{{placeHolder}}" [(ngModel)]="currentValue"/>
<clr-icon shape="search" size="20" class="search-btn" [class.filter-icon]="isShowSearchBox" (click)="onClick()"></clr-icon>
<input [hidden]="!isShowSearchBox" type="text" style="padding-left: 15px;" (keyup)="valueChange()" placeholder="{{placeHolder}}" [(ngModel)]="currentValue"/>
<span class="filter-divider" *ngIf="withDivider"></span>
</span>
`;
@ -14,4 +15,25 @@ export const FILTER_STYLES: string = `
position: relative;
right: -12px;
}
.filter-divider {
display: inline-block;
height: 16px;
width: 2px;
background-color: #cccccc;
padding-top: 12px;
padding-bottom: 12px;
position: relative;
top: 9px;
margin-right: 6px;
margin-left: 6px;
}
.search-btn {
cursor: pointer;
}
.search-btn:hover {
color: #007CBB;
}
`;

9
src/ui_ng/lib/src/list-replication-rule/list-replication-rule.component.html.ts
View File

@ -1,6 +1,5 @@
export const LIST_REPLICATION_RULE_TEMPLATE: string = `
<confirmation-dialog #toggleConfirmDialog (confirmAction)="toggleConfirm($event)"></confirmation-dialog>
<confirmation-dialog #deletionConfirmDialog (confirmAction)="deletionConfirm($event)"></confirmation-dialog>
<div>
<clr-datagrid [clrDgLoading]="loading">
<clr-dg-column [clrDgField]="'name'">{{'REPLICATION.NAME' | translate}}</clr-dg-column>
<clr-dg-column [clrDgField]="'project_name'" *ngIf="projectScope">{{'REPLICATION.PROJECT' | translate}}</clr-dg-column>
@ -37,4 +36,8 @@ export const LIST_REPLICATION_RULE_TEMPLATE: string = `
{{pagination.firstItem + 1}} - {{pagination.lastItem +1 }} {{'REPLICATION.OF' | translate}} {{pagination.totalItems }} {{'REPLICATION.ITEMS' | translate}}
<clr-dg-pagination #pagination [clrDgPageSize]="5"></clr-dg-pagination>
</clr-dg-footer>
</clr-datagrid>`;
</clr-datagrid>
<confirmation-dialog #toggleConfirmDialog (confirmAction)="toggleConfirm($event)"></confirmation-dialog>
<confirmation-dialog #deletionConfirmDialog (confirmAction)="deletionConfirm($event)"></confirmation-dialog>
</div>
`;

8
src/ui_ng/lib/src/log/recent-log.component.ts
View File

@ -11,7 +11,7 @@
// 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 { Component, OnInit } from '@angular/core';
import { Component, OnInit, Input } from '@angular/core';
import { Router } from '@angular/router';
import {
AccessLogService,
@ -23,6 +23,7 @@ import { ErrorHandler } from '../error-handler/index';
import { Observable } from 'rxjs/Observable';
import { toPromise, CustomComparator } from '../utils';
import { LOG_TEMPLATE, LOG_STYLES } from './recent-log.template';
import { DEFAULT_PAGE_SIZE } from '../utils';
import { Comparator, State } from 'clarity-angular';
@ -37,11 +38,12 @@ export class RecentLogComponent implements OnInit {
logsCache: AccessLog;
loading: boolean = true;
currentTerm: string;
@Input() withTitle: boolean = false;
pageSize: number = 15;
pageSize: number = DEFAULT_PAGE_SIZE;
currentPage: number = 0;
opTimeComparator: Comparator<AccessLog> = new CustomComparator<AccessLog>('op_time', 'date');
opTimeComparator: Comparator<AccessLogItem> = new CustomComparator<AccessLogItem>('op_time', 'date');
constructor(
private logService: AccessLogService,

7
src/ui_ng/lib/src/log/recent-log.template.ts
View File

@ -4,11 +4,11 @@
export const LOG_TEMPLATE: string = `
<div>
<h2 class="h2-log-override">{{'SIDE_NAV.LOGS' | translate}}</h2>
<h2 class="h2-log-override" *ngIf="withTitle">{{'SIDE_NAV.LOGS' | translate}}</h2>
<div class="row flex-items-xs-between flex-items-xs-bottom">
<div></div>
<div class="action-head-pos">
<hbr-filter filterPlaceholder='{{"AUDIT_LOG.FILTER_PLACEHOLDER" | translate}}' (filter)="doFilter($event)" [currentValue]="currentTerm"></hbr-filter>
<hbr-filter [withDivider]="true" filterPlaceholder='{{"AUDIT_LOG.FILTER_PLACEHOLDER" | translate}}' (filter)="doFilter($event)" [currentValue]="currentTerm"></hbr-filter>
<span (click)="refresh()" class="refresh-btn">
<clr-icon shape="refresh" [hidden]="inProgress" ng-disabled="inProgress"></clr-icon>
<span class="spinner spinner-inline" [hidden]="!inProgress"></span>
@ -47,6 +47,7 @@ export const LOG_STYLES: string = `
.action-head-pos {
padding-right: 18px;
height: 24px;
}
.refresh-btn {
@ -54,7 +55,7 @@ export const LOG_STYLES: string = `
}
.refresh-btn:hover {
color: #00bfff;
color: #007CBB;
}
.custom-lines-button {

11
src/ui_ng/lib/src/replication/replication.component.css.ts
View File

@ -1,11 +1,18 @@
export const REPLICATION_STYLE: string = `
.refresh-btn {
cursor: pointer;
}
.refresh-btn:hover {
color: #007CBB;
}
.option-left {
padding-left: 16px;
margin-top: 24px;
margin-top: 12px;
}
.option-right {
padding-right: 16px;
margin-top: 18px;
}
.option-left-down {

18
src/ui_ng/lib/src/replication/replication.component.html.ts
View File

@ -1,21 +1,21 @@
export const REPLICATION_TEMPLATE: string = `
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="row flex-items-xs-between">
<div class="row flex-items-xs-between" style="height:24px;">
<div class="flex-xs-middle option-left">
<button *ngIf="projectId" class="btn btn-link" (click)="openModal()"><clr-icon shape="add"></clr-icon> {{'REPLICATION.REPLICATION_RULE' | translate}}</button>
<create-edit-rule [projectId]="projectId" (reload)="reloadRules($event)"></create-edit-rule>
</div>
<div class="flex-xs-middle option-right">
<div class="select" style="float: left;">
<div class="select" style="float: left; top: 9px;">
<select (change)="doFilterRuleStatus($event)">
<option *ngFor="let r of ruleStatus" value="{{r.key}}">{{r.description | translate}}</option>
</select>
</div>
<hbr-filter filterPlaceholder='{{"REPLICATION.FILTER_POLICIES_PLACEHOLDER" | translate}}' (filter)="doSearchRules($event)" [currentValue]="search.ruleName"></hbr-filter>
<a href="javascript:void(0)" (click)="refreshRules()">
<hbr-filter [withDivider]="true" filterPlaceholder='{{"REPLICATION.FILTER_POLICIES_PLACEHOLDER" | translate}}' (filter)="doSearchRules($event)" [currentValue]="search.ruleName"></hbr-filter>
<span class="refresh-btn" (click)="refreshRules()">
<clr-icon shape="refresh"></clr-icon>
</a>
</span>
</div>
</div>
</div>
@ -23,14 +23,14 @@ export const REPLICATION_TEMPLATE: string = `
<hbr-list-replication-rule #listReplicationRule [projectId]="projectId" (selectOne)="selectOneRule($event)" (editOne)="openEditRule($event)" (reload)="reloadRules($event)" [loading]="loading" [withReplicationJob]="withReplicationJob" (redirect)="customRedirect($event)"></hbr-list-replication-rule>
</div>
<div *ngIf="withReplicationJob" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="row flex-items-xs-between">
<div class="row flex-items-xs-between" style="height:60px;">
<h5 class="flex-items-xs-bottom option-left-down" style="margin-left: 14px;">{{'REPLICATION.REPLICATION_JOBS' | translate}}</h5>
<div class="flex-items-xs-bottom option-right-down">
<button class="btn btn-link" (click)="toggleSearchJobOptionalName(currentJobSearchOption)">{{toggleJobSearchOption[currentJobSearchOption] | translate}}</button>
<hbr-filter filterPlaceholder='{{"REPLICATION.FILTER_JOBS_PLACEHOLDER" | translate}}' (filter)="doSearchJobs($event)" [currentValue]="search.repoName" ></hbr-filter>
<a href="javascript:void(0)" (click)="refreshJobs()">
<hbr-filter [withDivider]="true" filterPlaceholder='{{"REPLICATION.FILTER_JOBS_PLACEHOLDER" | translate}}' (filter)="doSearchJobs($event)" [currentValue]="search.repoName" ></hbr-filter>
<span class="refresh-btn" (click)="refreshJobs()">
<clr-icon shape="refresh"></clr-icon>
</a>
</span>
</div>
</div>
<div class="row flex-items-xs-right option-right" [hidden]="currentJobSearchOption === 0">

9
src/ui_ng/lib/src/repository-stackview/repository-stackview.component.css.ts
View File

@ -1,14 +1,17 @@
export const REPOSITORY_STACKVIEW_STYLES: string = `
.option-right {
padding-right: 16px;
margin-bottom: 12px;
}
.sub-grid-custom {
position: relative;
left: 40px;
}
.refresh-btn {
cursor: pointer;
}
.refresh-btn:hover {
color: #007CBB;
}
:host >>> .datagrid .datagrid-body .datagrid-row {
overflow-x: hidden;
overflow-y: hidden;

10
src/ui_ng/lib/src/repository-stackview/repository-stackview.component.html.ts
View File

@ -1,11 +1,11 @@
export const REPOSITORY_STACKVIEW_TEMPLATE: string = `
<confirmation-dialog #confirmationDialog (confirmAction)="confirmDeletion($event)"></confirmation-dialog>
<div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="height: 24px;">
<div class="row flex-items-xs-right option-right">
<div class="flex-xs-middle">
<hbr-filter filterPlaceholder="{{'REPOSITORY.FILTER_FOR_REPOSITORIES' | translate}}" (filter)="doSearchRepoNames($event)"></hbr-filter>
<a href="javascript:void(0)" (click)="refresh()"><clr-icon shape="refresh"></clr-icon></a>
<hbr-filter [withDivider]="true" filterPlaceholder="{{'REPOSITORY.FILTER_FOR_REPOSITORIES' | translate}}" (filter)="doSearchRepoNames($event)"></hbr-filter>
<span class="refresh-btn" (click)="refresh()"><clr-icon shape="refresh"></clr-icon></span>
</div>
</div>
</div>
@ -31,4 +31,6 @@ export const REPOSITORY_STACKVIEW_TEMPLATE: string = `
</clr-datagrid>
</div>
</div>
<confirmation-dialog #confirmationDialog (confirmAction)="confirmDeletion($event)"></confirmation-dialog>
</div>
`;

4
src/ui_ng/lib/src/tag/tag-detail.component.spec.ts
View File

@ -8,6 +8,7 @@ import { ErrorHandler } from '../error-handler/error-handler';
import { Tag, VulnerabilitySummary } from '../service/interface';
import { SERVICE_CONFIG, IServiceConfig } from '../service.config';
import { TagService, TagDefaultService, ScanningResultService, ScanningResultDefaultService } from '../service/index';
import { FilterComponent } from '../filter/index';
describe('TagDetailComponent (inline template)', () => {
@ -47,7 +48,8 @@ describe('TagDetailComponent (inline template)', () => {
],
declarations: [
TagDetailComponent,
ResultGridComponent
ResultGridComponent,
FilterComponent
],
providers: [
ErrorHandler,

7
src/ui_ng/lib/src/utils.ts
View File

@ -118,4 +118,9 @@ export class CustomComparator<T> implements Comparator<T> {
}
return comp;
}
}
}
/**
* The default page size
*/
export const DEFAULT_PAGE_SIZE: number = 15;

3
src/ui_ng/lib/src/vulnerability-scanning/result-grid.component.spec.ts
View File

@ -10,6 +10,7 @@ import { ScanningResultService, ScanningResultDefaultService } from '../service/
import { SERVICE_CONFIG, IServiceConfig } from '../service.config';
import { ErrorHandler } from '../error-handler/index';
import { SharedModule } from '../shared/shared.module';
import { FilterComponent } from '../filter/index';
describe('ResultGridComponent (inline template)', () => {
let component: ResultGridComponent;
@ -26,7 +27,7 @@ describe('ResultGridComponent (inline template)', () => {
imports: [
SharedModule
],
declarations: [ResultGridComponent],
declarations: [ResultGridComponent, FilterComponent],
providers: [
ErrorHandler,
{ provide: SERVICE_CONFIG, useValue: testConfig },

8
src/ui_ng/lib/src/vulnerability-scanning/result-grid.component.ts
View File

@ -38,4 +38,12 @@ export class ResultGridComponent implements OnInit {
})
.catch(error => { this.errorHandler.error(error) })
}
filterVulnerabilities(terms: string): void {
console.log(terms);
}
refresh(): void {
this.loadResults(this.tagId);
}
}

24
src/ui_ng/lib/src/vulnerability-scanning/scanning.css.ts
View File

@ -4,11 +4,9 @@ export const SCANNING_STYLES: string = `
height: 24px;
display: inline-block;
}
.bar-state {
text-align: center !important;
}
.scanning-button {
height: 24px;
margin-top: 0px;
@ -17,62 +15,58 @@ export const SCANNING_STYLES: string = `
top: -6px;
position: relative;
}
.tip-wrapper {
display: inline-block;
height: 16px;
max-height: 16px;
max-width: 150px;
}
.tip-position {
margin-left: -4px;
}
.tip-block {
margin-left: -4px;
}
.bar-block-high {
background-color: red;
}
.bar-block-medium {
background-color: orange;
}
.bar-block-low {
background-color: yellow;
}
.bar-block-none {
background-color: green;
}
.bar-block-unknown {
background-color: grey;
}
.bar-tooltip-font {
font-size: 13px;
color: #ffffff;
}
.bar-tooltip-font-title {
font-weight: 600;
}
.bar-summary {
margin-top: 12px;
text-align: left;
}
.bar-scanning-time {
margin-top: 12px;
}
.bar-summary-item {
margin-top: 3px;
margin-bottom: 3px;
}
.option-right {
padding-right: 16px;
}
.refresh-btn {
cursor: pointer;
}
.refresh-btn:hover {
color: #007CBB;
}
`;

12
src/ui_ng/lib/src/vulnerability-scanning/scanning.html.ts
View File

@ -42,7 +42,16 @@ export const TIP_COMPONENT_HTML: string = `
`;
export const GRID_COMPONENT_HTML: string = `
<div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="height: 24px;">
<div class="row flex-items-xs-right option-right">
<div class="flex-xs-middle">
<hbr-filter [withDivider]="true" filterPlaceholder="{{'VULNERABILITY.PLACEHOLDER' | translate}}" (filter)="filterVulnerabilities($event)"></hbr-filter>
<span class="refresh-btn" (click)="refresh()"><clr-icon shape="refresh"></clr-icon></span>
</div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<clr-datagrid>
<clr-dg-column [clrDgField]="'id'">{{'VULNERABILITY.GRID.COLUMN_ID' | translate}}</clr-dg-column>
<clr-dg-column [clrDgField]="'severity'">{{'VULNERABILITY.GRID.COLUMN_SEVERITY' | translate}}</clr-dg-column>
@ -71,6 +80,7 @@ export const GRID_COMPONENT_HTML: string = `
<clr-dg-pagination #pagination [clrDgPageSize]="25" [clrDgTotalItems]="scanningResults.length"></clr-dg-pagination>
</clr-dg-footer>
</clr-datagrid>
</div>
</div>
`;