diff --git a/src/ui_ng/lib/src/endpoint/endpoint.component.css.ts b/src/ui_ng/lib/src/endpoint/endpoint.component.css.ts index 8eab04166..6452b5d9a 100644 --- a/src/ui_ng/lib/src/endpoint/endpoint.component.css.ts +++ b/src/ui_ng/lib/src/endpoint/endpoint.component.css.ts @@ -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; } `; \ No newline at end of file diff --git a/src/ui_ng/lib/src/endpoint/endpoint.component.html.ts b/src/ui_ng/lib/src/endpoint/endpoint.component.html.ts index 926d79083..ebd4ce84d 100644 --- a/src/ui_ng/lib/src/endpoint/endpoint.component.html.ts +++ b/src/ui_ng/lib/src/endpoint/endpoint.component.html.ts @@ -1,17 +1,17 @@ export const ENDPOINT_TEMPLATE: string = ` - +
-
+
- - + + - +
@@ -37,4 +37,6 @@ export const ENDPOINT_TEMPLATE: string = `
+ +
`; \ No newline at end of file diff --git a/src/ui_ng/lib/src/filter/filter.component.ts b/src/ui_ng/lib/src/filter/filter.component.ts index 7e6f90a3c..5f7c80ada 100644 --- a/src/ui_ng/lib/src/filter/filter.component.ts +++ b/src/ui_ng/lib/src/filter/filter.component.ts @@ -31,6 +31,7 @@ export class FilterComponent implements OnInit { placeHolder: string = ""; filterTerms = new Subject(); + isExpanded: boolean = false; @Output("filter") private filterEvt = new EventEmitter(); @@ -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); + } } \ No newline at end of file diff --git a/src/ui_ng/lib/src/filter/filter.template.ts b/src/ui_ng/lib/src/filter/filter.template.ts index 1f55ad227..9bed73db5 100644 --- a/src/ui_ng/lib/src/filter/filter.template.ts +++ b/src/ui_ng/lib/src/filter/filter.template.ts @@ -4,8 +4,9 @@ export const FILTER_TEMPLATE: string = ` - - + + + `; @@ -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; +} `; \ No newline at end of file diff --git a/src/ui_ng/lib/src/list-replication-rule/list-replication-rule.component.html.ts b/src/ui_ng/lib/src/list-replication-rule/list-replication-rule.component.html.ts index 83e5df4eb..3292a7f42 100644 --- a/src/ui_ng/lib/src/list-replication-rule/list-replication-rule.component.html.ts +++ b/src/ui_ng/lib/src/list-replication-rule/list-replication-rule.component.html.ts @@ -1,6 +1,5 @@ export const LIST_REPLICATION_RULE_TEMPLATE: string = ` - - +
{{'REPLICATION.NAME' | translate}} {{'REPLICATION.PROJECT' | translate}} @@ -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}} -`; \ No newline at end of file + + + +
+`; \ No newline at end of file diff --git a/src/ui_ng/lib/src/log/recent-log.component.ts b/src/ui_ng/lib/src/log/recent-log.component.ts index 601f4345f..3e6b411c2 100644 --- a/src/ui_ng/lib/src/log/recent-log.component.ts +++ b/src/ui_ng/lib/src/log/recent-log.component.ts @@ -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 = new CustomComparator('op_time', 'date'); + opTimeComparator: Comparator = new CustomComparator('op_time', 'date'); constructor( private logService: AccessLogService, diff --git a/src/ui_ng/lib/src/log/recent-log.template.ts b/src/ui_ng/lib/src/log/recent-log.template.ts index 95fcf5d1d..9abf1081c 100644 --- a/src/ui_ng/lib/src/log/recent-log.template.ts +++ b/src/ui_ng/lib/src/log/recent-log.template.ts @@ -4,11 +4,11 @@ export const LOG_TEMPLATE: string = `
-

{{'SIDE_NAV.LOGS' | translate}}

+

{{'SIDE_NAV.LOGS' | translate}}

- + @@ -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 { diff --git a/src/ui_ng/lib/src/replication/replication.component.css.ts b/src/ui_ng/lib/src/replication/replication.component.css.ts index 7e5276d15..850dfc259 100644 --- a/src/ui_ng/lib/src/replication/replication.component.css.ts +++ b/src/ui_ng/lib/src/replication/replication.component.css.ts @@ -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 { diff --git a/src/ui_ng/lib/src/replication/replication.component.html.ts b/src/ui_ng/lib/src/replication/replication.component.html.ts index 9c8f4984c..283a45e3c 100644 --- a/src/ui_ng/lib/src/replication/replication.component.html.ts +++ b/src/ui_ng/lib/src/replication/replication.component.html.ts @@ -1,21 +1,21 @@ export const REPLICATION_TEMPLATE: string = `
-
+
-
+
- - + + - +
@@ -23,14 +23,14 @@ export const REPLICATION_TEMPLATE: string = `
-
+
{{'REPLICATION.REPLICATION_JOBS' | translate}}
- - + + - +
diff --git a/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.css.ts b/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.css.ts index fdbaab321..3a0a4588e 100644 --- a/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.css.ts +++ b/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.css.ts @@ -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; diff --git a/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.html.ts b/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.html.ts index fe0f6a31a..b9d935914 100644 --- a/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.html.ts +++ b/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.html.ts @@ -1,11 +1,11 @@ export const REPOSITORY_STACKVIEW_TEMPLATE: string = ` - +
-
+
- - + +
@@ -31,4 +31,6 @@ export const REPOSITORY_STACKVIEW_TEMPLATE: string = `
+ +
`; \ No newline at end of file diff --git a/src/ui_ng/lib/src/tag/tag-detail.component.spec.ts b/src/ui_ng/lib/src/tag/tag-detail.component.spec.ts index 039415b55..ecdbab517 100644 --- a/src/ui_ng/lib/src/tag/tag-detail.component.spec.ts +++ b/src/ui_ng/lib/src/tag/tag-detail.component.spec.ts @@ -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, diff --git a/src/ui_ng/lib/src/utils.ts b/src/ui_ng/lib/src/utils.ts index 3c5fb9add..cd7c8eb77 100644 --- a/src/ui_ng/lib/src/utils.ts +++ b/src/ui_ng/lib/src/utils.ts @@ -118,4 +118,9 @@ export class CustomComparator implements Comparator { } return comp; } -} \ No newline at end of file +} + +/** + * The default page size + */ +export const DEFAULT_PAGE_SIZE: number = 15; \ No newline at end of file diff --git a/src/ui_ng/lib/src/vulnerability-scanning/result-grid.component.spec.ts b/src/ui_ng/lib/src/vulnerability-scanning/result-grid.component.spec.ts index 1213c62ad..1ef98afa2 100644 --- a/src/ui_ng/lib/src/vulnerability-scanning/result-grid.component.spec.ts +++ b/src/ui_ng/lib/src/vulnerability-scanning/result-grid.component.spec.ts @@ -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 }, diff --git a/src/ui_ng/lib/src/vulnerability-scanning/result-grid.component.ts b/src/ui_ng/lib/src/vulnerability-scanning/result-grid.component.ts index a3d340b62..99e4750f5 100644 --- a/src/ui_ng/lib/src/vulnerability-scanning/result-grid.component.ts +++ b/src/ui_ng/lib/src/vulnerability-scanning/result-grid.component.ts @@ -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); + } } diff --git a/src/ui_ng/lib/src/vulnerability-scanning/scanning.css.ts b/src/ui_ng/lib/src/vulnerability-scanning/scanning.css.ts index c10a11f7a..5affed773 100644 --- a/src/ui_ng/lib/src/vulnerability-scanning/scanning.css.ts +++ b/src/ui_ng/lib/src/vulnerability-scanning/scanning.css.ts @@ -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; +} `; \ No newline at end of file diff --git a/src/ui_ng/lib/src/vulnerability-scanning/scanning.html.ts b/src/ui_ng/lib/src/vulnerability-scanning/scanning.html.ts index a7ee640d6..f65de9497 100644 --- a/src/ui_ng/lib/src/vulnerability-scanning/scanning.html.ts +++ b/src/ui_ng/lib/src/vulnerability-scanning/scanning.html.ts @@ -42,7 +42,16 @@ export const TIP_COMPONENT_HTML: string = ` `; export const GRID_COMPONENT_HTML: string = ` -
+
+
+
+
+ + +
+
+
+
{{'VULNERABILITY.GRID.COLUMN_ID' | translate}} {{'VULNERABILITY.GRID.COLUMN_SEVERITY' | translate}} @@ -71,6 +80,7 @@ export const GRID_COMPONENT_HTML: string = ` +
`;