diff --git a/.travis.yml b/.travis.yml index 0796aabe0..3cd6084e5 100644 --- a/.travis.yml +++ b/.travis.yml @@ -81,7 +81,7 @@ script: - sudo mkdir -p /harbor - sudo mv ./VERSION /harbor/UIVERSION - sudo service postgresql stop - - sudo make run_clarity_ut CLARITYIMAGE=vmware/harbor-clarity-ui-builder:1.4.0 + - sudo make run_clarity_ut CLARITYIMAGE=vmware/harbor-clarity-ui-builder:1.4.1 - cat ./src/ui_ng/npm-ut-test-results - sudo ./tests/testprepare.sh - sudo make -f make/photon/Makefile _build_postgresql _build_db _build_registry -e VERSIONTAG=dev -e CLAIRDBVERSION=dev -e REGISTRYVERSION=v2.6.2 @@ -107,7 +107,7 @@ script: - sudo rm -rf /data/config/* - sudo rm -rf /data/database/* - ls /data/cert - - sudo make install GOBUILDIMAGE=golang:1.9.2 COMPILETAG=compile_golangimage CLARITYIMAGE=vmware/harbor-clarity-ui-builder:1.4.0 NOTARYFLAG=true CLAIRFLAG=true + - sudo make install GOBUILDIMAGE=golang:1.9.2 COMPILETAG=compile_golangimage CLARITYIMAGE=vmware/harbor-clarity-ui-builder:1.4.1 NOTARYFLAG=true CLAIRFLAG=true - sleep 10 - docker ps - ./tests/validatecontainers.sh diff --git a/make/dev/nodeclarity/entrypoint.sh b/make/dev/nodeclarity/entrypoint.sh index bec32011d..b4899bb6d 100644 --- a/make/dev/nodeclarity/entrypoint.sh +++ b/make/dev/nodeclarity/entrypoint.sh @@ -34,7 +34,7 @@ sed -i 's/* as//g' src/app/shared/gauge/gauge.component.js cp ./dist/build.min.js ../ui/static/ cp -r ./src/i18n/ ../ui/static/ -cp ./src/styles.css ../ui/static/ +cp ./src/styles.scss ../ui/static/ cp -r ./src/images/ ../ui/static/ cp ./src/setting.json ../ui/static/ diff --git a/src/ui_ng/angular-cli.json b/src/ui_ng/angular-cli.json index 87732b1de..93021a4b1 100644 --- a/src/ui_ng/angular-cli.json +++ b/src/ui_ng/angular-cli.json @@ -20,7 +20,7 @@ "styles": [ "../node_modules/clarity-icons/clarity-icons.min.css", "../node_modules/clarity-ui/clarity-ui.min.css", - "styles.css" + "styles.scss" ], "scripts": [ "../node_modules/core-js/client/shim.min.js", diff --git a/src/ui_ng/lib/package.json b/src/ui_ng/lib/package.json index 5ba94ae84..338448728 100644 --- a/src/ui_ng/lib/package.json +++ b/src/ui_ng/lib/package.json @@ -1,6 +1,6 @@ { "name": "harbor-ui", - "version": "0.7.18-dev.1", + "version": "0.7.18-dev.6", "description": "Harbor shared UI components based on Clarity and Angular4", "author": "VMware", "module": "index.js", diff --git a/src/ui_ng/lib/src/config/registry-config.component.html.ts b/src/ui_ng/lib/src/config/registry-config.component.html similarity index 93% rename from src/ui_ng/lib/src/config/registry-config.component.html.ts rename to src/ui_ng/lib/src/config/registry-config.component.html index 804a81bc3..7bc33ef2f 100644 --- a/src/ui_ng/lib/src/config/registry-config.component.html.ts +++ b/src/ui_ng/lib/src/config/registry-config.component.html @@ -1,4 +1,3 @@ -export const REGISTRY_CONFIG_HTML: string = `
@@ -7,5 +6,4 @@ export const REGISTRY_CONFIG_HTML: string = `
- -`; \ No newline at end of file + \ No newline at end of file diff --git a/src/ui_ng/lib/src/config/registry-config.component.css.ts b/src/ui_ng/lib/src/config/registry-config.component.scss similarity index 61% rename from src/ui_ng/lib/src/config/registry-config.component.css.ts rename to src/ui_ng/lib/src/config/registry-config.component.scss index 130a7a58d..dfed30a8c 100644 --- a/src/ui_ng/lib/src/config/registry-config.component.css.ts +++ b/src/ui_ng/lib/src/config/registry-config.component.scss @@ -1,9 +1,7 @@ -export const REGISTRY_CONFIG_STYLES: string = ` .info-tips-icon { color: grey; } .info-tips-icon:hover { color: #007CBB; -} -`; \ No newline at end of file +} \ No newline at end of file diff --git a/src/ui_ng/lib/src/config/registry-config.component.ts b/src/ui_ng/lib/src/config/registry-config.component.ts index b790883f5..30ddf4139 100644 --- a/src/ui_ng/lib/src/config/registry-config.component.ts +++ b/src/ui_ng/lib/src/config/registry-config.component.ts @@ -1,7 +1,6 @@ import { Component, OnInit, EventEmitter, Output, ViewChild, Input } from '@angular/core'; import { Configuration, ComplexValueItem } from './config'; -import { REGISTRY_CONFIG_HTML } from './registry-config.component.html'; import { ConfigurationService, SystemInfoService, SystemInfo, ClairDBStatus } from '../service/index'; import { toPromise, @@ -24,7 +23,7 @@ import { TranslateService } from '@ngx-translate/core'; @Component({ selector: 'hbr-registry-config', - template: REGISTRY_CONFIG_HTML + templateUrl: './registry-config.component.html' }) export class RegistryConfigComponent implements OnInit { config: Configuration = new Configuration(); diff --git a/src/ui_ng/lib/src/config/replication/replication-config.component.html.ts b/src/ui_ng/lib/src/config/replication/replication-config.component.html similarity index 94% rename from src/ui_ng/lib/src/config/replication/replication-config.component.html.ts rename to src/ui_ng/lib/src/config/replication/replication-config.component.html index 52b081f6c..f3f7d31b7 100644 --- a/src/ui_ng/lib/src/config/replication/replication-config.component.html.ts +++ b/src/ui_ng/lib/src/config/replication/replication-config.component.html @@ -1,4 +1,3 @@ -export const REPLICATION_CONFIG_HTML: string = `
@@ -13,4 +12,3 @@ export const REPLICATION_CONFIG_HTML: string = `
-`; \ No newline at end of file diff --git a/src/ui_ng/src/app/project/project-config/project-config.component.css b/src/ui_ng/lib/src/config/replication/replication-config.component.scss similarity index 100% rename from src/ui_ng/src/app/project/project-config/project-config.component.css rename to src/ui_ng/lib/src/config/replication/replication-config.component.scss diff --git a/src/ui_ng/lib/src/config/replication/replication-config.component.ts b/src/ui_ng/lib/src/config/replication/replication-config.component.ts index 911264ff4..5d8bd96f6 100644 --- a/src/ui_ng/lib/src/config/replication/replication-config.component.ts +++ b/src/ui_ng/lib/src/config/replication/replication-config.component.ts @@ -1,14 +1,12 @@ import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core'; import { NgForm } from '@angular/forms'; -import { REPLICATION_CONFIG_HTML } from './replication-config.component.html'; import { Configuration } from '../config'; -import { REGISTRY_CONFIG_STYLES } from '../registry-config.component.css'; @Component({ selector: 'replication-config', - template: REPLICATION_CONFIG_HTML, - styles: [REGISTRY_CONFIG_STYLES] + templateUrl: './replication-config.component.html', + styles: ['./replication-config.component.scss', '../registry-config.component.scss'] }) export class ReplicationConfigComponent { config: Configuration; diff --git a/src/ui_ng/lib/src/config/system/system-settings.component.html.ts b/src/ui_ng/lib/src/config/system/system-settings.component.html similarity index 97% rename from src/ui_ng/lib/src/config/system/system-settings.component.html.ts rename to src/ui_ng/lib/src/config/system/system-settings.component.html index 5905f398e..d45ad29e5 100644 --- a/src/ui_ng/lib/src/config/system/system-settings.component.html.ts +++ b/src/ui_ng/lib/src/config/system/system-settings.component.html @@ -1,4 +1,3 @@ -export const SYSTEM_SETTINGS_HTML: string = `
@@ -37,5 +36,4 @@ export const SYSTEM_SETTINGS_HTML: string = `
-
-`; \ No newline at end of file + \ No newline at end of file diff --git a/src/ui_ng/src/app/project/project-label/project-label.component.css b/src/ui_ng/lib/src/config/system/system-settings.component.scss similarity index 100% rename from src/ui_ng/src/app/project/project-label/project-label.component.css rename to src/ui_ng/lib/src/config/system/system-settings.component.scss diff --git a/src/ui_ng/lib/src/config/system/system-settings.component.ts b/src/ui_ng/lib/src/config/system/system-settings.component.ts index c315d633e..4d1dc61ee 100644 --- a/src/ui_ng/lib/src/config/system/system-settings.component.ts +++ b/src/ui_ng/lib/src/config/system/system-settings.component.ts @@ -1,15 +1,13 @@ import { Component, Input, Output, EventEmitter, ViewChild, Inject } from '@angular/core'; import { NgForm } from '@angular/forms'; -import { SYSTEM_SETTINGS_HTML } from './system-settings.component.html'; import { Configuration } from '../config'; -import { REGISTRY_CONFIG_STYLES } from '../registry-config.component.css'; import { SERVICE_CONFIG, IServiceConfig } from '../../service.config'; @Component({ selector: 'system-settings', - template: SYSTEM_SETTINGS_HTML, - styles: [REGISTRY_CONFIG_STYLES] + templateUrl: './system-settings.component.html', + styleUrls: ['./system-settings.component.scss', '../registry-config.component.scss'] }) export class SystemSettingsComponent { config: Configuration; diff --git a/src/ui_ng/lib/src/config/vulnerability/vulnerability-config.component.template.ts b/src/ui_ng/lib/src/config/vulnerability/vulnerability-config.component.html similarity index 84% rename from src/ui_ng/lib/src/config/vulnerability/vulnerability-config.component.template.ts rename to src/ui_ng/lib/src/config/vulnerability/vulnerability-config.component.html index 57e53d36f..22966e33c 100644 --- a/src/ui_ng/lib/src/config/vulnerability/vulnerability-config.component.template.ts +++ b/src/ui_ng/lib/src/config/vulnerability/vulnerability-config.component.html @@ -1,4 +1,3 @@ -export const VULNERABILITY_CONFIG_HTML: string = `
@@ -43,39 +42,4 @@ export const VULNERABILITY_CONFIG_HTML: string = `
-
-`; - -export const VULNERABILITY_CONFIG_STYLES: string = ` -.form-group-override { - padding-left: 0px !important; -} - -.section-title { - font-size: 14px !important; - font-weight: 600 !important; -} - -.btn-font { - font-size: 12px !important; -} - -.namespace { - margin-left: 24px; -} - -.clr-dropdown-override { - margin-top: -8px; -} -.btn-scan-right{ - margin-left: 10px; -} -.btn-scan-right button{ - width: 160px; - margin-bottom: 0px; - margin-top: 5px; -} -.btn-scan-right span{ - margin-top: 4px; -} -`; \ No newline at end of file + \ No newline at end of file diff --git a/src/ui_ng/lib/src/config/vulnerability/vulnerability-config.component.scss b/src/ui_ng/lib/src/config/vulnerability/vulnerability-config.component.scss new file mode 100644 index 000000000..e9f4fd65b --- /dev/null +++ b/src/ui_ng/lib/src/config/vulnerability/vulnerability-config.component.scss @@ -0,0 +1,31 @@ +.form-group-override { + padding-left: 0px !important; +} + +.section-title { + font-size: 14px !important; + font-weight: 600 !important; +} + +.btn-font { + font-size: 12px !important; +} + +.namespace { + margin-left: 24px; +} + +.clr-dropdown-override { + margin-top: -8px; +} +.btn-scan-right{ + margin-left: 10px; +} +.btn-scan-right button{ + width: 160px; + margin-bottom: 0px; + margin-top: 5px; +} +.btn-scan-right span{ + margin-top: 4px; +} diff --git a/src/ui_ng/lib/src/config/vulnerability/vulnerability-config.component.ts b/src/ui_ng/lib/src/config/vulnerability/vulnerability-config.component.ts index 43036aa0b..41f89c517 100644 --- a/src/ui_ng/lib/src/config/vulnerability/vulnerability-config.component.ts +++ b/src/ui_ng/lib/src/config/vulnerability/vulnerability-config.component.ts @@ -2,7 +2,6 @@ import { Component, Input, Output, EventEmitter, ViewChild, OnInit } from '@angu import { NgForm } from '@angular/forms'; import { Configuration } from '../config'; -import { VULNERABILITY_CONFIG_HTML, VULNERABILITY_CONFIG_STYLES } from './vulnerability-config.component.template'; import { ScanningResultService, SystemInfo, @@ -13,15 +12,13 @@ import { toPromise } from '../../utils'; import { TranslateService } from '@ngx-translate/core'; import { ClairDBStatus, ClairDetail } from '../../service/interface'; -import { REGISTRY_CONFIG_STYLES } from '../registry-config.component.css'; - const ONE_HOUR_SECONDS: number = 3600; const ONE_DAY_SECONDS: number = 24 * ONE_HOUR_SECONDS; @Component({ selector: 'vulnerability-config', - template: VULNERABILITY_CONFIG_HTML, - styles: [VULNERABILITY_CONFIG_STYLES, REGISTRY_CONFIG_STYLES] + templateUrl: './vulnerability-config.component.html', + styles: ['./vulnerability-config.component.scss', '../registry-config.component.scss'] }) export class VulnerabilityConfigComponent implements OnInit { _localTime: Date = new Date(); diff --git a/src/ui_ng/lib/src/confirmation-dialog/confirmation-dialog.component.css.ts b/src/ui_ng/lib/src/confirmation-dialog/confirmation-dialog.component.css.ts deleted file mode 100644 index ce4251e8a..000000000 --- a/src/ui_ng/lib/src/confirmation-dialog/confirmation-dialog.component.css.ts +++ /dev/null @@ -1,30 +0,0 @@ -export const CONFIRMATION_DIALOG_STYLE: string = ` -.confirmation-icon-inline { - display: inline-block; -} - -.confirmation-title { - line-height: 24px; - color: #000000; - font-size: 22px; -} - -.confirmation-content { - font-size: 14px; - color: #565656; - line-height: 24px; - display: inline-block; - vertical-align: middle; - width: 80%; - white-space: pre-wrap; -} -.batchInfoUl{ - padding: 20px; list-style-type: none; -} -.batchInfoUl li {line-height: 24px;border-bottom: 1px solid #e8e8e8;} -.batchInfoUl li span:first-child {padding-right: 20px; width: 240px; display: inline-block; color:#666; - text-overflow: ellipsis; overflow: hidden; vertical-align: middle;} -.batchInfoUl li span:last-child {width: 220px; display: inline-block; color:#666;} -.batchInfoUl li span i {display: inline-block; line-height: 1.2em; font-size: 0.8em; color: #999;} -.batchInfoUl li span a{cursor: pointer; text-decoration: underline;} -`; \ No newline at end of file diff --git a/src/ui_ng/lib/src/confirmation-dialog/confirmation-dialog.component.html b/src/ui_ng/lib/src/confirmation-dialog/confirmation-dialog.component.html new file mode 100644 index 000000000..678f61b91 --- /dev/null +++ b/src/ui_ng/lib/src/confirmation-dialog/confirmation-dialog.component.html @@ -0,0 +1,45 @@ + +

{{dialogTitle}}

+
+
+ +
+
{{dialogContent}}
+
+
    +
  • +   {{info.name}} + {{info.status}} + + {{info.status}} +
    + {{info.errorInfo}} +     +
    • +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + +
+ \ No newline at end of file diff --git a/src/ui_ng/lib/src/confirmation-dialog/confirmation-dialog.component.html.ts b/src/ui_ng/lib/src/confirmation-dialog/confirmation-dialog.component.html.ts deleted file mode 100644 index 50e884c9b..000000000 --- a/src/ui_ng/lib/src/confirmation-dialog/confirmation-dialog.component.html.ts +++ /dev/null @@ -1,46 +0,0 @@ -export const CONFIRMATION_DIALOG_TEMPLATE: string = ` - -

{{dialogTitle}}

-
-
- -
-
{{dialogContent}}
-
-
    -
  • -   {{info.name}} - {{info.status}} - - {{info.status}}
    - {{info.errorInfo}} -     -
    • -
-
-
-
- - - - - - - - - - - - - - - - - - - - - -
- -`; \ No newline at end of file diff --git a/src/ui_ng/lib/src/confirmation-dialog/confirmation-dialog.component.scss b/src/ui_ng/lib/src/confirmation-dialog/confirmation-dialog.component.scss new file mode 100644 index 000000000..d16a336f9 --- /dev/null +++ b/src/ui_ng/lib/src/confirmation-dialog/confirmation-dialog.component.scss @@ -0,0 +1,57 @@ +.confirmation-icon-inline { + display: inline-block; +} + +.confirmation-title { + line-height: 24px; + color: #000000; + font-size: 22px; +} + +.confirmation-content { + font-size: 14px; + color: #565656; + line-height: 24px; + display: inline-block; + vertical-align: middle; + width: 80%; + white-space: pre-wrap; +} + +.batchInfoUl { + padding: 20px; + list-style-type: none; +} + +.batchInfoUl li { + line-height: 24px; + border-bottom: 1px solid #e8e8e8; +} + +.batchInfoUl li span:first-child { + padding-right: 20px; + width: 240px; + display: inline-block; + color: #666; + text-overflow: ellipsis; + overflow: hidden; + vertical-align: middle; +} + +.batchInfoUl li span:last-child { + width: 220px; + display: inline-block; + color: #666; +} + +.batchInfoUl li span i { + display: inline-block; + line-height: 1.2em; + font-size: 0.8em; + color: #999; +} + +.batchInfoUl li span a { + cursor: pointer; + text-decoration: underline; +} \ No newline at end of file diff --git a/src/ui_ng/lib/src/confirmation-dialog/confirmation-dialog.component.ts b/src/ui_ng/lib/src/confirmation-dialog/confirmation-dialog.component.ts index 6f03044f1..054b3260c 100644 --- a/src/ui_ng/lib/src/confirmation-dialog/confirmation-dialog.component.ts +++ b/src/ui_ng/lib/src/confirmation-dialog/confirmation-dialog.component.ts @@ -18,14 +18,12 @@ import { ConfirmationMessage } from './confirmation-message'; import { ConfirmationAcknowledgement } from './confirmation-state-message'; import { ConfirmationState, ConfirmationTargets, ConfirmationButtons } from '../shared/shared.const'; -import { CONFIRMATION_DIALOG_TEMPLATE } from './confirmation-dialog.component.html'; -import { CONFIRMATION_DIALOG_STYLE } from './confirmation-dialog.component.css'; import {BatchInfo} from './confirmation-batch-message'; @Component({ selector: 'confirmation-dialog', - template: CONFIRMATION_DIALOG_TEMPLATE, - styles: [ CONFIRMATION_DIALOG_STYLE ] + templateUrl: './confirmation-dialog.component.html', + styleUrls: [ './confirmation-dialog.component.scss' ] }) export class ConfirmationDialogComponent { diff --git a/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.html.ts b/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.html similarity index 98% rename from src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.html.ts rename to src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.html index 55c930574..4bc0760f9 100644 --- a/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.html.ts +++ b/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.html @@ -1,4 +1,3 @@ -export const CREATE_EDIT_ENDPOINT_TEMPLATE: string = `

{{modalTitle}}

@@ -61,4 +60,4 @@ export const CREATE_EDIT_ENDPOINT_TEMPLATE: string = ` -`; \ No newline at end of file + \ No newline at end of file diff --git a/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.css.ts b/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.scss similarity index 72% rename from src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.css.ts rename to src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.scss index 00671afec..44e0b0fc4 100644 --- a/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.css.ts +++ b/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.scss @@ -1,4 +1,3 @@ -export const CREATE_EDIT_ENDPOINT_STYLE = ` .form-group-label-override { font-size: 14px; font-weight: 400; @@ -7,5 +6,4 @@ export const CREATE_EDIT_ENDPOINT_STYLE = ` clr-tooltip { top: 3px; position: relative; - } -`; \ No newline at end of file + } \ No newline at end of file diff --git a/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.spec.ts b/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.spec.ts index 17f9e2fe4..59bb2d26c 100644 --- a/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.spec.ts +++ b/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.spec.ts @@ -27,15 +27,15 @@ describe('CreateEditEndpointComponent (inline template)', () => { let comp: CreateEditEndpointComponent; let fixture: ComponentFixture; - + let config: IServiceConfig = { systemInfoEndpoint: '/api/endpoints/testing' }; let endpointService: EndpointService; - + let spy: jasmine.Spy; - + beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ @@ -57,11 +57,11 @@ describe('CreateEditEndpointComponent (inline template)', () => { beforeEach(()=>{ fixture = TestBed.createComponent(CreateEditEndpointComponent); comp = fixture.componentInstance; - + endpointService = fixture.debugElement.injector.get(EndpointService); spy = spyOn(endpointService, 'getEndpoint').and.returnValue(Promise.resolve(mockData)); fixture.detectChanges(); - + comp.openCreateEditTarget(true, 1); fixture.detectChanges(); }); diff --git a/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.ts b/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.ts index de2e41302..fe391e74e 100644 --- a/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.ts +++ b/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.ts @@ -32,9 +32,6 @@ import { Endpoint } from '../service/interface'; import { TranslateService } from '@ngx-translate/core'; -import { CREATE_EDIT_ENDPOINT_STYLE } from './create-edit-endpoint.component.css'; -import { CREATE_EDIT_ENDPOINT_TEMPLATE } from './create-edit-endpoint.component.html'; - import { toPromise, clone, compareValue, isEmptyObject } from '../utils'; import { Subscription } from 'rxjs/Subscription'; @@ -43,8 +40,8 @@ const FAKE_PASSWORD = 'rjGcfuRu'; @Component({ selector: 'hbr-create-edit-endpoint', - template: CREATE_EDIT_ENDPOINT_TEMPLATE, - styles: [CREATE_EDIT_ENDPOINT_STYLE] + templateUrl: './create-edit-endpoint.component.html', + styleUrls: ['./create-edit-endpoint.component.scss'] }) export class CreateEditEndpointComponent implements AfterViewChecked, OnDestroy { modalTitle: string; diff --git a/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.css.ts b/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.css.ts deleted file mode 100644 index 07498e0de..000000000 --- a/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.css.ts +++ /dev/null @@ -1,30 +0,0 @@ -export const CREATE_EDIT_LABEL_STYLE: string = ` - .form-group-label-override { - font-size: 14px; - font-weight: 400; - } - - form{margin-bottom:-10px;padding-top:0; margin-top: 20px;width: 100%;background-color: #eee; border:1px solid #ccc;} - form .form-group{display:inline-flex;padding-left: 70px;} - form .form-group>label:first-child{width: auto;} - section{padding:.5rem 0;} - section> label{margin-left: 20px;} - - .colorDrop {display:inline-block;position: relative; width: 132px;} - .colorDrop .colorPanel{position:absolute; width:166px; padding:6px; background-color: white; border: 1px solid #ccc; z-index:10;} - .btnColor{ - margin: 0 !important; - padding: 0 !important; - width: 26px; - height:22px; - min-width: 26px;} - .colorPanel span{margin: 5px 4px; width:30px;height:24px; text-align: center;line-height: 24px;font-size:12px; border:1px solid #A1A1A1;} - .closePanel{ display: block; - left: 138px; - position: relative; - font-size: 18px; - width: 10px; - line-height: 8px; - cursor: pointer; - text-decoration: none;} -`; \ No newline at end of file diff --git a/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.html.ts b/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.html similarity index 97% rename from src/ui_ng/lib/src/create-edit-label/create-edit-label.component.html.ts rename to src/ui_ng/lib/src/create-edit-label/create-edit-label.component.html index f72223660..4ea4764e1 100644 --- a/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.html.ts +++ b/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.html @@ -1,4 +1,3 @@ -export const CREATE_EDIT_LABEL_TEMPLATE: string = `
@@ -34,4 +33,4 @@ export const CREATE_EDIT_LABEL_TEMPLATE: string = `
-
`; \ No newline at end of file + \ No newline at end of file diff --git a/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.scss b/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.scss new file mode 100644 index 000000000..8433cbacb --- /dev/null +++ b/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.scss @@ -0,0 +1,74 @@ + .form-group-label-override { + font-size: 14px; + font-weight: 400; + } + + form { + margin-bottom: -10px; + padding-top: 0; + margin-top: 20px; + width: 100%; + background-color: #eee; + border: 1px solid #ccc; + } + + form .form-group { + display: inline-flex; + padding-left: 70px; + } + + form .form-group>label:first-child { + width: auto; + } + + section { + padding: .5rem 0; + } + + section>label { + margin-left: 20px; + } + + .colorDrop { + display: inline-block; + position: relative; + width: 132px; + } + + .colorDrop .colorPanel { + position: absolute; + width: 166px; + padding: 6px; + background-color: white; + border: 1px solid #ccc; + z-index: 10; + } + + .btnColor { + margin: 0 !important; + padding: 0 !important; + width: 26px; + height: 22px; + min-width: 26px; + } + + .colorPanel span { + margin: 5px 4px; + width: 30px; + height: 24px; + text-align: center; + line-height: 24px; + font-size: 12px; + border: 1px solid #A1A1A1; + } + + .closePanel { + display: block; + left: 138px; + position: relative; + font-size: 18px; + width: 10px; + line-height: 8px; + cursor: pointer; + text-decoration: none; + } \ No newline at end of file diff --git a/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.ts b/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.ts index 352748416..860a2c389 100644 --- a/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.ts +++ b/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.ts @@ -19,12 +19,8 @@ import { Input, OnInit, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; - import {Label} from '../service/interface'; -import { CREATE_EDIT_LABEL_STYLE } from './create-edit-label.component.css'; -import { CREATE_EDIT_LABEL_TEMPLATE } from './create-edit-label.component.html'; - import {toPromise, clone, compareValue} from '../utils'; import {LabelService} from "../service/label.service"; @@ -35,8 +31,8 @@ import {LabelColor} from "../shared/shared.const"; @Component({ selector: 'hbr-create-edit-label', - template: CREATE_EDIT_LABEL_TEMPLATE, - styles: [CREATE_EDIT_LABEL_STYLE], + templateUrl: './create-edit-label.component.html', + styleUrls: ['./create-edit-label.component.scss'], changeDetection: ChangeDetectionStrategy.Default }) diff --git a/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.css.ts b/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.css.ts deleted file mode 100644 index b842ce255..000000000 --- a/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.css.ts +++ /dev/null @@ -1,70 +0,0 @@ -export const CREATE_EDIT_RULE_STYLE: string = ` -/** - * Created by pengf on 9/28/2017. - */ - -.select{ - width: 186px; -} -.select .optionMore{ - background-color: #bfbaba; - height: 1.6em; - font-size: 1.2em; - cursor: pointer; - text-align: center; -} -.hideFilter{ display: none;} -h4{ - color: #666; -} -.colorRed{color: red;} -.colorRed a{text-decoration: underline;color: #007CBB;} -.alertLabel{display:block; margin-top:2px; line-height:1em; font-size:12px;} - -.inputWidth{width: 270px;} -.endpointSelect{ width: 270px; margin-right: 20px;} -.filterSelect{width: 315px;} -.filterSelect clr-icon{margin-left: 15px;} -.filterSelect label{width: 136px;} -.filterSelect label input{width: 100%;} -.pull-left{float: left;} -.padLeft0{padding-left: 0;} -.floatSetPar{display: inline-block; width: 120px;margin-right: 10px;} -.floatSet {display: inline-block; width: 82px;margin-right: 4px;} -.form-group{ min-height: 36px;} - -.projectInput{float: left;position: relative;} -.switchIcon{width:20px;height:20px; margin-top: 10px;margin-left: 10px; cursor: pointer;} -.addEndpoint{ margin-top: .25em !important;padding-left:2px;padding-right:2px;min-width:58px;margin-right:0} -.shadow{position: absolute;top: 8px;} -.is-solid{cursor: pointer;} -.selectBox{ - position: absolute; - width: 100%; - height: auto; - margin-top:-0.25rem; - border: 1px solid #ccc; - background-color: white; - border: 1px solid rgba(0,0,0,.15); - border-right-width: 2px; - border-bottom-width: 2px; - border-radius: 6px; - box-shadow: 0 5px 10px rgba(0,0,0,.2); - z-index: 100; -} -.selectBox ul li{ - list-style: none; - padding: 3px 20px - cursor: pointer; -} -.selectBox ul li:hover{ - color: #262626; - background-image: linear-gradient(180deg,#f5f5f5 0,#e8e8e8); - background-repeat: repeat-x; -} -.form-group-override{ - padding-left: 170px !important; -} -.form-group>label:first-child{font-size:14px; width:6.5rem;} -.goLink{color:blue; border-bottom:1px solid blue; line-height:14px; cursor:pointer;} -`; \ No newline at end of file diff --git a/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.html.ts b/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.html similarity index 99% rename from src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.html.ts rename to src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.html index 7cb7c4134..f2a9ea3cf 100644 --- a/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.html.ts +++ b/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.html @@ -1,4 +1,3 @@ -export const CREATE_EDIT_RULE_TEMPLATE: string = `

{{headerTitle | translate}}

@@ -131,4 +130,4 @@ export const CREATE_EDIT_RULE_TEMPLATE: string = ` -`; + diff --git a/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.scss b/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.scss new file mode 100644 index 000000000..312944e8c --- /dev/null +++ b/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.scss @@ -0,0 +1,157 @@ +.select { + width: 186px; +} + +.select .optionMore { + background-color: #bfbaba; + height: 1.6em; + font-size: 1.2em; + cursor: pointer; + text-align: center; +} + +.hideFilter { + display: none; +} + +h4 { + color: #666; +} + +.colorRed { + color: red; +} + +.colorRed a { + text-decoration: underline; + color: #007CBB; +} + +.alertLabel { + display: block; + margin-top: 2px; + line-height: 1em; + font-size: 12px; +} + +.inputWidth { + width: 270px; +} + +.endpointSelect { + width: 270px; + margin-right: 20px; +} + +.filterSelect { + width: 315px; +} + +.filterSelect clr-icon { + margin-left: 15px; +} + +.filterSelect label { + width: 136px; +} + +.filterSelect label input { + width: 100%; +} + +.pull-left { + float: left; +} + +.padLeft0 { + padding-left: 0; +} + +.floatSetPar { + display: inline-block; + width: 120px; + margin-right: 10px; +} + +.floatSet { + display: inline-block; + width: 82px; + margin-right: 4px; +} + +.form-group { + min-height: 36px; +} + +.projectInput { + float: left; + position: relative; +} + +.switchIcon { + width: 20px; + height: 20px; + margin-top: 10px; + margin-left: 10px; + cursor: pointer; +} + +.addEndpoint { + margin-top: .25em !important; + padding-left: 2px; + padding-right: 2px; + min-width: 58px; + margin-right: 0 +} + +.shadow { + position: absolute; + top: 8px; +} + +.is-solid { + cursor: pointer; +} + +.selectBox { + position: absolute; + width: 100%; + height: auto; + margin-top: -0.25rem; + border: 1px solid #ccc; + background-color: white; + border: 1px solid rgba(0, 0, 0, .15); + border-right-width: 2px; + border-bottom-width: 2px; + border-radius: 6px; + box-shadow: 0 5px 10px rgba(0, 0, 0, .2); + z-index: 100; +} + +.selectBox ul li { + list-style: none; + padding: 3px 20px; + cursor: pointer; +} + +.selectBox ul li:hover { + color: #262626; + background-image: linear-gradient(180deg, #f5f5f5 0, #e8e8e8); + background-repeat: repeat-x; +} + +.form-group-override { + padding-left: 170px !important; +} + +.form-group>label:first-child { + font-size: 14px; + width: 6.5rem; +} + +.goLink { + color: blue; + border-bottom: 1px solid blue; + line-height: 14px; + cursor: pointer; +} \ No newline at end of file diff --git a/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.ts b/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.ts index 827bf5a4b..92e4a05bb 100644 --- a/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.ts +++ b/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.ts @@ -21,8 +21,6 @@ import {Router, ActivatedRoute} from "@angular/router"; import {compareValue, isEmptyObject, toPromise} from "../utils"; import { InlineAlertComponent } from '../inline-alert/inline-alert.component'; import {ReplicationService} from "../service/replication.service"; -import {CREATE_EDIT_RULE_TEMPLATE} from "./create-edit-rule.component.html"; -import {CREATE_EDIT_RULE_STYLE} from "./create-edit-rule.component.css"; import {ErrorHandler} from "../error-handler/error-handler"; import {TranslateService} from "@ngx-translate/core"; import {EndpointService} from "../service/endpoint.service"; @@ -34,8 +32,8 @@ const ONE_DAY_SECONDS: number = 24 * ONE_HOUR_SECONDS; @Component ({ selector: 'hbr-create-edit-rule', - template: CREATE_EDIT_RULE_TEMPLATE, - styles: [CREATE_EDIT_RULE_STYLE] + templateUrl: './create-edit-rule.component.html', + styleUrls: ['./create-edit-rule.component.scss'] }) diff --git a/src/ui_ng/lib/src/datetime-picker/datetime-picker.component.html.ts b/src/ui_ng/lib/src/datetime-picker/datetime-picker.component.html similarity index 87% rename from src/ui_ng/lib/src/datetime-picker/datetime-picker.component.html.ts rename to src/ui_ng/lib/src/datetime-picker/datetime-picker.component.html index 90c35c590..ea01d8568 100644 --- a/src/ui_ng/lib/src/datetime-picker/datetime-picker.component.html.ts +++ b/src/ui_ng/lib/src/datetime-picker/datetime-picker.component.html @@ -1,9 +1,7 @@ -export const DATETIME_PICKER_TEMPLATE: string = ` -`; \ No newline at end of file + \ No newline at end of file diff --git a/src/ui_ng/lib/src/datetime-picker/datetime-picker.component.ts b/src/ui_ng/lib/src/datetime-picker/datetime-picker.component.ts index 7eb061849..a00b6d1d4 100644 --- a/src/ui_ng/lib/src/datetime-picker/datetime-picker.component.ts +++ b/src/ui_ng/lib/src/datetime-picker/datetime-picker.component.ts @@ -1,11 +1,9 @@ import {Component, Input, Output, EventEmitter, ViewChild, OnChanges} from '@angular/core'; import { NgModel } from '@angular/forms'; -import { DATETIME_PICKER_TEMPLATE } from './datetime-picker.component.html'; - @Component({ selector: 'hbr-datetime', - template: DATETIME_PICKER_TEMPLATE + templateUrl: './datetime-picker.component.html' }) export class DatePickerComponent implements OnChanges{ diff --git a/src/ui_ng/lib/src/endpoint/endpoint.component.css.ts b/src/ui_ng/lib/src/endpoint/endpoint.component.css.ts deleted file mode 100644 index 79b57b43a..000000000 --- a/src/ui_ng/lib/src/endpoint/endpoint.component.css.ts +++ /dev/null @@ -1,21 +0,0 @@ -export const ENDPOINT_STYLE: string = ` - .option-left { - padding-left: 16px; - margin-top: -6px; - } - .option-right { - padding-right: 16px; - } - .refresh-btn { - cursor: pointer; - } - .refresh-btn:hover { - color: #007CBB; - } - .rightPos{ - position: absolute; - z-index: 100; - right: 35px; - margin-top: 4px; - height: 24px;} -`; \ 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 similarity index 98% rename from src/ui_ng/lib/src/endpoint/endpoint.component.html.ts rename to src/ui_ng/lib/src/endpoint/endpoint.component.html index f3ee43dae..01bdb05c6 100644 --- a/src/ui_ng/lib/src/endpoint/endpoint.component.html.ts +++ b/src/ui_ng/lib/src/endpoint/endpoint.component.html @@ -1,4 +1,3 @@ -export const ENDPOINT_TEMPLATE = `
@@ -41,5 +40,4 @@ export const ENDPOINT_TEMPLATE = `
-
-`; \ No newline at end of file +
\ No newline at end of file diff --git a/src/ui_ng/lib/src/endpoint/endpoint.component.scss b/src/ui_ng/lib/src/endpoint/endpoint.component.scss new file mode 100644 index 000000000..ad95ff775 --- /dev/null +++ b/src/ui_ng/lib/src/endpoint/endpoint.component.scss @@ -0,0 +1,24 @@ +.option-left { + padding-left: 16px; + margin-top: -6px; +} + +.option-right { + padding-right: 16px; +} + +.refresh-btn { + cursor: pointer; +} + +.refresh-btn:hover { + color: #007CBB; +} + +.rightPos { + position: absolute; + z-index: 100; + right: 35px; + margin-top: 4px; + height: 24px; +} \ No newline at end of file diff --git a/src/ui_ng/lib/src/endpoint/endpoint.component.ts b/src/ui_ng/lib/src/endpoint/endpoint.component.ts index 53dd65343..67e59803f 100644 --- a/src/ui_ng/lib/src/endpoint/endpoint.component.ts +++ b/src/ui_ng/lib/src/endpoint/endpoint.component.ts @@ -29,9 +29,6 @@ import { Subscription } from 'rxjs/Subscription'; import { CreateEditEndpointComponent } from '../create-edit-endpoint/create-edit-endpoint.component'; -import { ENDPOINT_STYLE } from './endpoint.component.css'; -import { ENDPOINT_TEMPLATE } from './endpoint.component.html'; - import { toPromise, CustomComparator } from '../utils'; import { State, Comparator } from 'clarity-angular'; @@ -40,8 +37,8 @@ import {Observable} from "rxjs/Observable"; @Component({ selector: 'hbr-endpoint', - template: ENDPOINT_TEMPLATE, - styles: [ENDPOINT_STYLE], + templateUrl: './endpoint.component.html', + styleUrls: ['./endpoint.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) export class EndpointComponent implements OnInit, OnDestroy { diff --git a/src/ui_ng/lib/src/filter/filter.component.html b/src/ui_ng/lib/src/filter/filter.component.html new file mode 100644 index 000000000..00b18dcf8 --- /dev/null +++ b/src/ui_ng/lib/src/filter/filter.component.html @@ -0,0 +1,6 @@ + + + + + \ No newline at end of file diff --git a/src/ui_ng/lib/src/filter/filter.component.scss b/src/ui_ng/lib/src/filter/filter.component.scss new file mode 100644 index 000000000..e9957d32c --- /dev/null +++ b/src/ui_ng/lib/src/filter/filter.component.scss @@ -0,0 +1,25 @@ +.filter-icon { + 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/filter/filter.component.ts b/src/ui_ng/lib/src/filter/filter.component.ts index bba258ade..b61134b8d 100644 --- a/src/ui_ng/lib/src/filter/filter.component.ts +++ b/src/ui_ng/lib/src/filter/filter.component.ts @@ -18,13 +18,11 @@ import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/debounceTime'; import 'rxjs/add/operator/distinctUntilChanged'; -import { FILTER_TEMPLATE, FILTER_STYLES } from './filter.template'; - @Component({ selector: 'hbr-filter', - styles: [FILTER_STYLES], - template: FILTER_TEMPLATE + templateUrl: './filter.component.html', + styleUrls: ['./filter.component.scss'] }) export class FilterComponent implements OnInit { diff --git a/src/ui_ng/lib/src/filter/filter.template.ts b/src/ui_ng/lib/src/filter/filter.template.ts deleted file mode 100644 index 005850d16..000000000 --- a/src/ui_ng/lib/src/filter/filter.template.ts +++ /dev/null @@ -1,39 +0,0 @@ -/** - * Define template resources for filter component - */ - -export const FILTER_TEMPLATE: string = ` - - - - - -`; - -export const FILTER_STYLES: string = ` -.filter-icon { - 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/gridview/grid-view.component.html.ts b/src/ui_ng/lib/src/gridview/grid-view.component.html similarity index 94% rename from src/ui_ng/lib/src/gridview/grid-view.component.html.ts rename to src/ui_ng/lib/src/gridview/grid-view.component.html index fdc9937aa..4ecb8269e 100644 --- a/src/ui_ng/lib/src/gridview/grid-view.component.html.ts +++ b/src/ui_ng/lib/src/gridview/grid-view.component.html @@ -1,4 +1,3 @@ -export const GRIDVIEW_TEMPLATE = `
-
-` \ No newline at end of file + \ No newline at end of file diff --git a/src/ui_ng/lib/src/gridview/grid-view.component.css.ts b/src/ui_ng/lib/src/gridview/grid-view.component.scss similarity index 70% rename from src/ui_ng/lib/src/gridview/grid-view.component.css.ts rename to src/ui_ng/lib/src/gridview/grid-view.component.scss index e97f73bf3..fe8eca862 100644 --- a/src/ui_ng/lib/src/gridview/grid-view.component.css.ts +++ b/src/ui_ng/lib/src/gridview/grid-view.component.scss @@ -1,10 +1,3 @@ -// Copyright (c) 2017-2018 VMware, Inc. All Rights Reserved. -// This software is released under MIT license. -// The full license information can be found in LICENSE in the root directory of this project. - -// @import 'node_modules/admiral-ui-common/css/mixins'; - -export const GRIDVIEW_STYLE = ` .grid-content { position: relative; top: 36px; @@ -37,10 +30,10 @@ export const GRIDVIEW_STYLE = ` left: 0; right: 0; bottom: 0; - @include animation(fadein 0.4s); text-align: center; background-color: rgba(255, 255, 255, 0.5); } + .central-block-loading-more { position: relative; z-index: 10; @@ -48,10 +41,10 @@ export const GRIDVIEW_STYLE = ` left: 0; right: 0; bottom: 0; - @include animation(fadein 0.4s); text-align: center; background-color: rgba(255, 255, 255, 0.5); } + .vertical-helper { display: inline-block; height: 100%; @@ -62,6 +55,4 @@ export const GRIDVIEW_STYLE = ` width: 100px; height: 100px; vertical-align: middle; -} - -` \ No newline at end of file +} \ No newline at end of file diff --git a/src/ui_ng/lib/src/gridview/grid-view.component.ts b/src/ui_ng/lib/src/gridview/grid-view.component.ts index d34f08f94..a4bb3c1c7 100644 --- a/src/ui_ng/lib/src/gridview/grid-view.component.ts +++ b/src/ui_ng/lib/src/gridview/grid-view.component.ts @@ -16,14 +16,12 @@ import { Router, ActivatedRoute, NavigationEnd } from '@angular/router'; import { Subscription } from 'rxjs/Subscription'; import { TranslateService } from '@ngx-translate/core'; -import { GRIDVIEW_TEMPLATE } from './grid-view.component.html'; -import { GRIDVIEW_STYLE } from './grid-view.component.css'; import { ScrollPosition } from '../service/interface' @Component({ selector: 'hbr-gridview', - template: GRIDVIEW_TEMPLATE, - styles: [GRIDVIEW_STYLE], + templateUrl: './grid-view.component.html', + styleUrls: ['./grid-view.component.scss'], encapsulation: ViewEncapsulation.None }) /** diff --git a/src/ui_ng/lib/src/harbor-library.module.ts b/src/ui_ng/lib/src/harbor-library.module.ts index cae236599..a37bc09b1 100644 --- a/src/ui_ng/lib/src/harbor-library.module.ts +++ b/src/ui_ng/lib/src/harbor-library.module.ts @@ -4,9 +4,6 @@ import { LOG_DIRECTIVES } from './log/index'; import { FILTER_DIRECTIVES } from './filter/index'; import { ENDPOINT_DIRECTIVES } from './endpoint/index'; import { REPOSITORY_DIRECTIVES } from './repository/index'; -import { REPOSITORY_STACKVIEW_DIRECTIVES } from './repository-stackview/index'; - -import { REPOSITORY_LISTVIEW_DIRECTIVES } from './repository-listview/index'; import { TAG_DIRECTIVES } from './tag/index'; import { REPLICATION_DIRECTIVES } from './replication/index'; @@ -167,8 +164,6 @@ export function initConfig(translateInitializer: TranslateServiceInitializer, co FILTER_DIRECTIVES, ENDPOINT_DIRECTIVES, REPOSITORY_DIRECTIVES, - REPOSITORY_STACKVIEW_DIRECTIVES, - REPOSITORY_LISTVIEW_DIRECTIVES, TAG_DIRECTIVES, CREATE_EDIT_ENDPOINT_DIRECTIVES, CONFIRMATION_DIALOG_DIRECTIVES, @@ -193,8 +188,6 @@ export function initConfig(translateInitializer: TranslateServiceInitializer, co FILTER_DIRECTIVES, ENDPOINT_DIRECTIVES, REPOSITORY_DIRECTIVES, - REPOSITORY_STACKVIEW_DIRECTIVES, - REPOSITORY_LISTVIEW_DIRECTIVES, TAG_DIRECTIVES, CREATE_EDIT_ENDPOINT_DIRECTIVES, CONFIRMATION_DIALOG_DIRECTIVES, diff --git a/src/ui_ng/lib/src/index.ts b/src/ui_ng/lib/src/index.ts index d626cf436..00d6cfd83 100644 --- a/src/ui_ng/lib/src/index.ts +++ b/src/ui_ng/lib/src/index.ts @@ -9,7 +9,6 @@ export * from './endpoint/index'; export * from './repository/index'; export * from './create-edit-endpoint/index'; export * from './create-edit-rule/index'; -export * from './repository-stackview/index'; export * from './tag/index'; export * from './list-replication-rule/index'; export * from './replication/index'; diff --git a/src/ui_ng/lib/src/inline-alert/inline-alert.component.html.ts b/src/ui_ng/lib/src/inline-alert/inline-alert.component.html similarity index 91% rename from src/ui_ng/lib/src/inline-alert/inline-alert.component.html.ts rename to src/ui_ng/lib/src/inline-alert/inline-alert.component.html index 2a07c3359..668e5392d 100644 --- a/src/ui_ng/lib/src/inline-alert/inline-alert.component.html.ts +++ b/src/ui_ng/lib/src/inline-alert/inline-alert.component.html @@ -1,4 +1,3 @@ -export const INLINE_ALERT_TEMPLATE: string = `
@@ -9,5 +8,4 @@ export const INLINE_ALERT_TEMPLATE: string = `
- -`; \ No newline at end of file + \ No newline at end of file diff --git a/src/ui_ng/lib/src/inline-alert/inline-alert.component.css.ts b/src/ui_ng/lib/src/inline-alert/inline-alert.component.scss similarity index 83% rename from src/ui_ng/lib/src/inline-alert/inline-alert.component.css.ts rename to src/ui_ng/lib/src/inline-alert/inline-alert.component.scss index 68fe7c857..9855e2d07 100644 --- a/src/ui_ng/lib/src/inline-alert/inline-alert.component.css.ts +++ b/src/ui_ng/lib/src/inline-alert/inline-alert.component.scss @@ -1,4 +1,3 @@ -export const INLINE_ALERT_STYLE: string = ` .alert-text-blink { color: red; font-weight: bolder; @@ -12,5 +11,4 @@ export const INLINE_ALERT_STYLE: string = ` } :host >>> .alert-icon-wrapper{ display: inline; -} -`; \ No newline at end of file +} \ No newline at end of file diff --git a/src/ui_ng/lib/src/inline-alert/inline-alert.component.ts b/src/ui_ng/lib/src/inline-alert/inline-alert.component.ts index dc62f41fe..86e51c1ca 100644 --- a/src/ui_ng/lib/src/inline-alert/inline-alert.component.ts +++ b/src/ui_ng/lib/src/inline-alert/inline-alert.component.ts @@ -18,13 +18,10 @@ import { errorHandler } from '../shared/shared.utils'; import { Observable } from 'rxjs/Rx'; import { Subscription } from "rxjs"; -import { INLINE_ALERT_STYLE } from './inline-alert.component.css'; -import { INLINE_ALERT_TEMPLATE } from './inline-alert.component.html'; - @Component({ selector: 'hbr-inline-alert', - template: INLINE_ALERT_TEMPLATE, - styles: [ INLINE_ALERT_STYLE ] + templateUrl: './inline-alert.component.html', + styleUrls: [ './inline-alert.component.scss' ] }) export class InlineAlertComponent { inlineAlertType: string = 'alert-danger'; diff --git a/src/ui_ng/lib/src/job-log-viewer/job-log-viewer.component.template.ts b/src/ui_ng/lib/src/job-log-viewer/job-log-viewer.component.html similarity index 65% rename from src/ui_ng/lib/src/job-log-viewer/job-log-viewer.component.template.ts rename to src/ui_ng/lib/src/job-log-viewer/job-log-viewer.component.html index 93588cf19..b28701b76 100644 --- a/src/ui_ng/lib/src/job-log-viewer/job-log-viewer.component.template.ts +++ b/src/ui_ng/lib/src/job-log-viewer/job-log-viewer.component.html @@ -1,4 +1,3 @@ -export const JOB_LOG_VIEWER_TEMPLATE: string = `

{{title | translate }}

@@ -12,20 +11,4 @@ export const JOB_LOG_VIEWER_TEMPLATE: string = `
- -`; - -export const JOB_LOG_VIEWER_STYLES: string = ` -.log-viewer-title { - line-height: 24px; - color: #000000; - font-size: 22px; -} - -.loading-back { - height: 358px; - display: flex; - align-items: center; - justify-content: center; -} -`; \ No newline at end of file + \ No newline at end of file diff --git a/src/ui_ng/lib/src/job-log-viewer/job-log-viewer.component.scss b/src/ui_ng/lib/src/job-log-viewer/job-log-viewer.component.scss new file mode 100644 index 000000000..a2308f75a --- /dev/null +++ b/src/ui_ng/lib/src/job-log-viewer/job-log-viewer.component.scss @@ -0,0 +1,12 @@ +.log-viewer-title { + line-height: 24px; + color: #000000; + font-size: 22px; +} + +.loading-back { + height: 358px; + display: flex; + align-items: center; + justify-content: center; +} diff --git a/src/ui_ng/lib/src/job-log-viewer/job-log-viewer.component.ts b/src/ui_ng/lib/src/job-log-viewer/job-log-viewer.component.ts index 4786a1e79..e7bafefa6 100644 --- a/src/ui_ng/lib/src/job-log-viewer/job-log-viewer.component.ts +++ b/src/ui_ng/lib/src/job-log-viewer/job-log-viewer.component.ts @@ -13,7 +13,6 @@ // limitations under the License. import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Input} from '@angular/core'; -import { JOB_LOG_VIEWER_TEMPLATE, JOB_LOG_VIEWER_STYLES } from './job-log-viewer.component.template'; import { JobLogService } from '../service/index'; import { ErrorHandler } from '../error-handler/index'; import { toPromise } from '../utils'; @@ -22,8 +21,8 @@ const supportSet: string[] = ["replication", "scan"]; @Component({ selector: 'job-log-viewer', - template: JOB_LOG_VIEWER_TEMPLATE, - styles: [JOB_LOG_VIEWER_STYLES], + templateUrl: './job-log-viewer.component.html', + styleUrls: ['./job-log-viewer.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) diff --git a/src/ui_ng/lib/src/label-piece/label-piece.component.html b/src/ui_ng/lib/src/label-piece/label-piece.component.html new file mode 100644 index 000000000..863ab1636 --- /dev/null +++ b/src/ui_ng/lib/src/label-piece/label-piece.component.html @@ -0,0 +1,5 @@ + diff --git a/src/ui_ng/lib/src/label-piece/label-piece.component.scss b/src/ui_ng/lib/src/label-piece/label-piece.component.scss new file mode 100644 index 000000000..3a5e468da --- /dev/null +++ b/src/ui_ng/lib/src/label-piece/label-piece.component.scss @@ -0,0 +1,17 @@ +.label { + border: none; + color: #222; + display: inline-block; + justify-content: flex-start; + overflow: hidden; + text-overflow: ellipsis; + line-height: .875rem; +} + +.label clr-icon { + margin-right: 3px; +} + +.btn-group .dropdown-menu clr-icon { + display: block; +} \ No newline at end of file diff --git a/src/ui_ng/lib/src/label-piece/label-piece.component.ts b/src/ui_ng/lib/src/label-piece/label-piece.component.ts index d00234eaf..99561d5b3 100644 --- a/src/ui_ng/lib/src/label-piece/label-piece.component.ts +++ b/src/ui_ng/lib/src/label-piece/label-piece.component.ts @@ -18,15 +18,14 @@ import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/debounceTime'; import 'rxjs/add/operator/distinctUntilChanged'; -import { LABEL_PIEICE_TEMPLATE, LABEL_PIEICE_STYLES } from './label-piece.template'; import {Label} from "../service/interface"; import {LabelColor} from "../shared/shared.const"; @Component({ selector: 'hbr-label-piece', - styles: [LABEL_PIEICE_STYLES], - template: LABEL_PIEICE_TEMPLATE + templateUrl: './label-piece.component.html', + styleUrls: ['./label-piece.component.scss'] }) export class LabelPieceComponent implements OnInit, OnChanges { diff --git a/src/ui_ng/lib/src/label-piece/label-piece.template.ts b/src/ui_ng/lib/src/label-piece/label-piece.template.ts deleted file mode 100644 index b8ec01490..000000000 --- a/src/ui_ng/lib/src/label-piece/label-piece.template.ts +++ /dev/null @@ -1,22 +0,0 @@ -/** - * Define template resources for filter component - */ - -export const LABEL_PIEICE_TEMPLATE: string = ` - -`; - -export const LABEL_PIEICE_STYLES: string = ` - .label{border: none; color:#222; - display: inline-block; - justify-content: flex-start; - overflow: hidden; - text-overflow: ellipsis; - line-height: .875rem;} - .label clr-icon{ margin-right: 3px;} - .btn-group .dropdown-menu clr-icon{display:block;} -`; \ No newline at end of file diff --git a/src/ui_ng/lib/src/label/label.component.css.ts b/src/ui_ng/lib/src/label/label.component.css.ts deleted file mode 100644 index 707434c3f..000000000 --- a/src/ui_ng/lib/src/label/label.component.css.ts +++ /dev/null @@ -1,21 +0,0 @@ -export const LABEL_STYLE: string = ` - .option-left { - padding-left: 16px; - margin-top: -6px; - } - .option-right { - padding-right: 16px; - } - .refresh-btn { - cursor: pointer; - } - .refresh-btn:hover { - color: #007CBB; - } - .rightPos{ - position: absolute; - z-index: 100; - right: 35px; - margin-top: 4px; - height: 24px;} -`; \ No newline at end of file diff --git a/src/ui_ng/lib/src/label/label.component.html.ts b/src/ui_ng/lib/src/label/label.component.html similarity index 98% rename from src/ui_ng/lib/src/label/label.component.html.ts rename to src/ui_ng/lib/src/label/label.component.html index fd58e9398..dc13ef4ae 100644 --- a/src/ui_ng/lib/src/label/label.component.html.ts +++ b/src/ui_ng/lib/src/label/label.component.html @@ -1,4 +1,3 @@ -export const LABEL_TEMPLATE = `
@@ -39,5 +38,4 @@ export const LABEL_TEMPLATE = `
-
-`; \ No newline at end of file +
\ No newline at end of file diff --git a/src/ui_ng/lib/src/label/label.component.scss b/src/ui_ng/lib/src/label/label.component.scss new file mode 100644 index 000000000..ad95ff775 --- /dev/null +++ b/src/ui_ng/lib/src/label/label.component.scss @@ -0,0 +1,24 @@ +.option-left { + padding-left: 16px; + margin-top: -6px; +} + +.option-right { + padding-right: 16px; +} + +.refresh-btn { + cursor: pointer; +} + +.refresh-btn:hover { + color: #007CBB; +} + +.rightPos { + position: absolute; + z-index: 100; + right: 35px; + margin-top: 4px; + height: 24px; +} \ No newline at end of file diff --git a/src/ui_ng/lib/src/label/label.component.ts b/src/ui_ng/lib/src/label/label.component.ts index 6cb1727c3..23bcdd51f 100644 --- a/src/ui_ng/lib/src/label/label.component.ts +++ b/src/ui_ng/lib/src/label/label.component.ts @@ -15,8 +15,6 @@ import { Component, OnInit, OnDestroy, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef, Input } from '@angular/core'; -import {LABEL_TEMPLATE} from "./label.component.html"; -import {LABEL_STYLE} from "./label.component.css"; import {Label} from "../service/interface"; import {LabelDefaultService, LabelService} from "../service/label.service"; import {toPromise} from "../utils"; @@ -30,8 +28,8 @@ import {TranslateService} from "@ngx-translate/core"; import {ConfirmationDialogComponent} from "../confirmation-dialog/confirmation-dialog.component"; @Component({ selector: 'hbr-label', - template: LABEL_TEMPLATE, - styles: [LABEL_STYLE], + templateUrl: './label.component.html', + styleUrls: ['./label.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) export class LabelComponent implements OnInit { diff --git a/src/ui_ng/lib/src/list-replication-rule/list-replication-rule.component.css.ts b/src/ui_ng/lib/src/list-replication-rule/list-replication-rule.component.css.ts deleted file mode 100644 index 67157fd6c..000000000 --- a/src/ui_ng/lib/src/list-replication-rule/list-replication-rule.component.css.ts +++ /dev/null @@ -1,2 +0,0 @@ -export const LIST_REPLICATION_RULE_CSS = ` -` \ 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 similarity index 98% rename from src/ui_ng/lib/src/list-replication-rule/list-replication-rule.component.html.ts rename to src/ui_ng/lib/src/list-replication-rule/list-replication-rule.component.html index 20ca5fded..c3ca177b1 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 @@ -1,4 +1,3 @@ -export const LIST_REPLICATION_RULE_TEMPLATE: string = `
@@ -36,5 +35,4 @@ export const LIST_REPLICATION_RULE_TEMPLATE: string = ` -
-`; \ No newline at end of file + \ No newline at end of file diff --git a/src/ui_ng/lib/src/list-replication-rule/list-replication-rule.component.scss b/src/ui_ng/lib/src/list-replication-rule/list-replication-rule.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/ui_ng/lib/src/list-replication-rule/list-replication-rule.component.ts b/src/ui_ng/lib/src/list-replication-rule/list-replication-rule.component.ts index 4c73ba74f..d1a74e7d7 100644 --- a/src/ui_ng/lib/src/list-replication-rule/list-replication-rule.component.ts +++ b/src/ui_ng/lib/src/list-replication-rule/list-replication-rule.component.ts @@ -41,15 +41,13 @@ import { toPromise, CustomComparator } from '../utils'; import { State, Comparator } from 'clarity-angular'; -import { LIST_REPLICATION_RULE_TEMPLATE } from './list-replication-rule.component.html'; -import { LIST_REPLICATION_RULE_CSS } from './list-replication-rule.component.css'; import {BatchInfo, BathInfoChanges} from "../confirmation-dialog/confirmation-batch-message"; import {Observable} from "rxjs/Observable"; @Component({ selector: 'hbr-list-replication-rule', - template: LIST_REPLICATION_RULE_TEMPLATE, - styles: [LIST_REPLICATION_RULE_CSS], + templateUrl: './list-replication-rule.component.html', + styleUrls: ['./list-replication-rule.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) export class ListReplicationRuleComponent implements OnInit, OnChanges { diff --git a/src/ui_ng/lib/src/log/recent-log.template.ts b/src/ui_ng/lib/src/log/recent-log.component.html similarity index 59% rename from src/ui_ng/lib/src/log/recent-log.template.ts rename to src/ui_ng/lib/src/log/recent-log.component.html index 0d478af85..20533815f 100644 --- a/src/ui_ng/lib/src/log/recent-log.template.ts +++ b/src/ui_ng/lib/src/log/recent-log.component.html @@ -1,8 +1,3 @@ -/** - * Define the inline template and styles with ts variables - */ - -export const LOG_TEMPLATE: string = `

{{'SIDE_NAV.LOGS' | translate}}

@@ -16,10 +11,11 @@ export const LOG_TEMPLATE: string = `
- + - - + +
@@ -39,64 +35,10 @@ export const LOG_TEMPLATE: string = ` {{l.op_time | date: 'short'}} - {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} - {{'AUDIT_LOG.OF' | translate}} {{pagination.totalItems}} {{'AUDIT_LOG.ITEMS' | translate}} - + {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'AUDIT_LOG.OF' | translate}} {{pagination.totalItems}} {{'AUDIT_LOG.ITEMS' + | translate}} + - -`; - -export const LOG_STYLES: string = ` -.h2-log-override { - margin-top: 0px !important; -} - -.action-head-pos { - padding-right: 18px; - height: 24px; -} - -.refresh-btn { - cursor: pointer; -} - -.refresh-btn:hover { - color: #007CBB; -} - -.custom-lines-button { - padding: 0px !important; - min-width: 25px !important; -} - -.lines-button-toggole { - font-size: 16px; - text-decoration: underline; -} - -.log-select { - width: 130px; - display: inline-block; - top: 1px; -} - -.item-divider { - height: 24px; - display: inline-block; - width: 1px; - background-color: #ccc; - opacity: 0.55; - margin-left: 12px; - top: 8px; - position: relative; -} -.rightPos { - position: absolute; - z-index: 100; - right: 35px; - margin-top: 4px; -} -.filterTag{float:left;margin-top:8px;} -`; \ No newline at end of file + \ No newline at end of file diff --git a/src/ui_ng/lib/src/log/recent-log.component.scss b/src/ui_ng/lib/src/log/recent-log.component.scss new file mode 100644 index 000000000..76d3cf595 --- /dev/null +++ b/src/ui_ng/lib/src/log/recent-log.component.scss @@ -0,0 +1,55 @@ +.h2-log-override { + margin-top: 0px !important; +} + +.action-head-pos { + padding-right: 18px; + height: 24px; +} + +.refresh-btn { + cursor: pointer; +} + +.refresh-btn:hover { + color: #007CBB; +} + +.custom-lines-button { + padding: 0px !important; + min-width: 25px !important; +} + +.lines-button-toggole { + font-size: 16px; + text-decoration: underline; +} + +.log-select { + width: 130px; + display: inline-block; + top: 1px; +} + +.item-divider { + height: 24px; + display: inline-block; + width: 1px; + background-color: #ccc; + opacity: 0.55; + margin-left: 12px; + top: 8px; + position: relative; +} + +.rightPos { + position: absolute; + z-index: 100; + right: 35px; + margin-top: 4px; +} + +.filterTag { + float: left; + margin-top: 8px; +} \ 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 4c5115852..6ddf0396a 100644 --- a/src/ui_ng/lib/src/log/recent-log.component.ts +++ b/src/ui_ng/lib/src/log/recent-log.component.ts @@ -22,7 +22,6 @@ import { 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, calculatePage, @@ -34,8 +33,8 @@ import { Comparator, State } from 'clarity-angular'; @Component({ selector: 'hbr-log', - styles: [LOG_STYLES], - template: LOG_TEMPLATE + templateUrl: './recent-log.component.html', + styleUrls: ['./recent-log.component.scss'] }) export class RecentLogComponent implements OnInit { diff --git a/src/ui_ng/lib/src/project-policy-config/project-policy-config.component.css.ts b/src/ui_ng/lib/src/project-policy-config/project-policy-config.component.css.ts deleted file mode 100644 index b48779761..000000000 --- a/src/ui_ng/lib/src/project-policy-config/project-policy-config.component.css.ts +++ /dev/null @@ -1,9 +0,0 @@ -export const PROJECT_POLICY_CONFIG_STYLE = `#severity-blk div -{ - display: inline-block; -} - -.select { - width: 120px; -} -`; diff --git a/src/ui_ng/lib/src/project-policy-config/project-policy-config.component.html.ts b/src/ui_ng/lib/src/project-policy-config/project-policy-config.component.html similarity index 98% rename from src/ui_ng/lib/src/project-policy-config/project-policy-config.component.html.ts rename to src/ui_ng/lib/src/project-policy-config/project-policy-config.component.html index 04b17f327..ecf8fd7db 100644 --- a/src/ui_ng/lib/src/project-policy-config/project-policy-config.component.html.ts +++ b/src/ui_ng/lib/src/project-policy-config/project-policy-config.component.html @@ -1,4 +1,3 @@ -export const PROJECT_POLICY_CONFIG_TEMPLATE = `
@@ -48,4 +47,4 @@ export const PROJECT_POLICY_CONFIG_TEMPLATE = `
-
`; + \ No newline at end of file diff --git a/src/ui_ng/lib/src/project-policy-config/project-policy-config.component.scss b/src/ui_ng/lib/src/project-policy-config/project-policy-config.component.scss new file mode 100644 index 000000000..af7084564 --- /dev/null +++ b/src/ui_ng/lib/src/project-policy-config/project-policy-config.component.scss @@ -0,0 +1,8 @@ +#severity-blk div +{ + display: inline-block; +} + +.select { + width: 120px; +} \ No newline at end of file diff --git a/src/ui_ng/lib/src/project-policy-config/project-policy-config.component.ts b/src/ui_ng/lib/src/project-policy-config/project-policy-config.component.ts index 5694cd021..2b6e0f236 100644 --- a/src/ui_ng/lib/src/project-policy-config/project-policy-config.component.ts +++ b/src/ui_ng/lib/src/project-policy-config/project-policy-config.component.ts @@ -1,7 +1,5 @@ import { Component, Input, OnInit, ViewChild } from '@angular/core'; -import { PROJECT_POLICY_CONFIG_TEMPLATE } from './project-policy-config.component.html'; -import { PROJECT_POLICY_CONFIG_STYLE } from './project-policy-config.component.css'; import { toPromise, compareValue, clone } from '../utils'; import { ProjectService } from '../service/project.service'; import { ErrorHandler } from '../error-handler/error-handler'; @@ -42,8 +40,8 @@ export class ProjectPolicy { @Component({ selector: 'hbr-project-policy-config', - template: PROJECT_POLICY_CONFIG_TEMPLATE, - styles: [PROJECT_POLICY_CONFIG_STYLE], + templateUrl: './project-policy-config.component.html', + styleUrls: ['./project-policy-config.component.scss'] }) export class ProjectPolicyConfigComponent implements OnInit { onGoing = false; diff --git a/src/ui_ng/lib/src/push-image/copy-input.component.ts b/src/ui_ng/lib/src/push-image/copy-input.component.ts index 1ce7f3b73..9f22f91b9 100644 --- a/src/ui_ng/lib/src/push-image/copy-input.component.ts +++ b/src/ui_ng/lib/src/push-image/copy-input.component.ts @@ -1,7 +1,5 @@ import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core'; -import { COPY_INPUT_HTML } from './copy-input.html'; -import { PUSH_IMAGE_STYLE } from './push-image.css'; export const enum CopyStatus { NORMAL, SUCCESS, ERROR @@ -9,8 +7,8 @@ export const enum CopyStatus { @Component({ selector: 'hbr-copy-input', - styles: [PUSH_IMAGE_STYLE], - template: COPY_INPUT_HTML, + templateUrl: './copy-input.coponent.html', + styleUrls: ['./push-image.scss'], providers: [] }) diff --git a/src/ui_ng/lib/src/push-image/copy-input.html.ts b/src/ui_ng/lib/src/push-image/copy-input.coponent.html similarity index 94% rename from src/ui_ng/lib/src/push-image/copy-input.html.ts rename to src/ui_ng/lib/src/push-image/copy-input.coponent.html index 4006358b4..7778abc5c 100644 --- a/src/ui_ng/lib/src/push-image/copy-input.html.ts +++ b/src/ui_ng/lib/src/push-image/copy-input.coponent.html @@ -1,4 +1,3 @@ -export const COPY_INPUT_HTML = `
{{headerTitle}} @@ -14,5 +13,4 @@ export const COPY_INPUT_HTML = `
-
-`; + \ No newline at end of file diff --git a/src/ui_ng/lib/src/push-image/push-image.html.ts b/src/ui_ng/lib/src/push-image/push-image.component.html similarity index 97% rename from src/ui_ng/lib/src/push-image/push-image.html.ts rename to src/ui_ng/lib/src/push-image/push-image.component.html index 36f32cb52..18cbcc853 100644 --- a/src/ui_ng/lib/src/push-image/push-image.html.ts +++ b/src/ui_ng/lib/src/push-image/push-image.component.html @@ -1,4 +1,3 @@ -export const PUSH_IMAGE_HTML: string = `
- -`; \ No newline at end of file + \ No newline at end of file diff --git a/src/ui_ng/lib/src/push-image/push-image.component.ts b/src/ui_ng/lib/src/push-image/push-image.component.ts index ab776ebc9..bba227cb4 100644 --- a/src/ui_ng/lib/src/push-image/push-image.component.ts +++ b/src/ui_ng/lib/src/push-image/push-image.component.ts @@ -2,13 +2,11 @@ import { Component, Input, ViewChild } from '@angular/core'; import { CopyInputComponent } from './copy-input.component'; import { InlineAlertComponent } from '../inline-alert/inline-alert.component'; -import { PUSH_IMAGE_STYLE } from './push-image.css'; -import { PUSH_IMAGE_HTML } from './push-image.html'; @Component({ selector: 'hbr-push-image-button', - template: PUSH_IMAGE_HTML, - styles: [PUSH_IMAGE_STYLE], + templateUrl: './push-image.component.html', + styleUrls: ['./push-image.scss'], providers: [] }) diff --git a/src/ui_ng/lib/src/push-image/push-image.css.ts b/src/ui_ng/lib/src/push-image/push-image.scss similarity index 93% rename from src/ui_ng/lib/src/push-image/push-image.css.ts rename to src/ui_ng/lib/src/push-image/push-image.scss index ce9ac53ad..84444506c 100644 --- a/src/ui_ng/lib/src/push-image/push-image.css.ts +++ b/src/ui_ng/lib/src/push-image/push-image.scss @@ -1,4 +1,3 @@ -export const PUSH_IMAGE_STYLE: string = ` .commands-container { min-width: 360px; max-width: 720px; @@ -45,5 +44,4 @@ export const PUSH_IMAGE_STYLE: string = ` } .hide{ display:none; -} -`; \ No newline at end of file +} \ No newline at end of file diff --git a/src/ui_ng/lib/src/replication/replication.component.html.ts b/src/ui_ng/lib/src/replication/replication.component.html similarity index 99% rename from src/ui_ng/lib/src/replication/replication.component.html.ts rename to src/ui_ng/lib/src/replication/replication.component.html index 880c8e12c..bbe1e249e 100644 --- a/src/ui_ng/lib/src/replication/replication.component.html.ts +++ b/src/ui_ng/lib/src/replication/replication.component.html @@ -1,4 +1,3 @@ -export const REPLICATION_TEMPLATE: string = `
@@ -75,4 +74,4 @@ export const REPLICATION_TEMPLATE: string = ` -
`; \ No newline at end of file +
\ No newline at end of file diff --git a/src/ui_ng/lib/src/replication/replication.component.css.ts b/src/ui_ng/lib/src/replication/replication.component.scss similarity index 89% rename from src/ui_ng/lib/src/replication/replication.component.css.ts rename to src/ui_ng/lib/src/replication/replication.component.scss index aa73d9af3..409a7f529 100644 --- a/src/ui_ng/lib/src/replication/replication.component.css.ts +++ b/src/ui_ng/lib/src/replication/replication.component.scss @@ -1,4 +1,3 @@ -export const REPLICATION_STYLE: string = ` .refresh-btn { cursor: pointer; } @@ -28,4 +27,4 @@ export const REPLICATION_STYLE: string = ` margin-top: 5px; z-index: 100; height: 32px; -}`; +} diff --git a/src/ui_ng/lib/src/replication/replication.component.ts b/src/ui_ng/lib/src/replication/replication.component.ts index 0bbc832db..c08eb35f6 100644 --- a/src/ui_ng/lib/src/replication/replication.component.ts +++ b/src/ui_ng/lib/src/replication/replication.component.ts @@ -34,9 +34,6 @@ import { import { Comparator } from 'clarity-angular'; -import { REPLICATION_TEMPLATE } from './replication.component.html'; -import { REPLICATION_STYLE } from './replication.component.css'; - import { JobLogViewerComponent } from '../job-log-viewer/index'; import { State } from "clarity-angular"; import {Observable} from "rxjs/Observable"; @@ -81,8 +78,8 @@ export class SearchOption { @Component({ selector: 'hbr-replication', - template: REPLICATION_TEMPLATE, - styles: [REPLICATION_STYLE] + templateUrl: './replication.component.html', + styleUrls: ['./replication.component.scss'] }) export class ReplicationComponent implements OnInit, OnDestroy { diff --git a/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.css b/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.scss similarity index 100% rename from src/ui_ng/lib/src/repository-gridview/repository-gridview.component.css rename to src/ui_ng/lib/src/repository-gridview/repository-gridview.component.scss diff --git a/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.ts b/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.ts index 248d4a25e..939f31190 100644 --- a/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.ts +++ b/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.ts @@ -20,7 +20,7 @@ import { GridViewComponent } from '../gridview/grid-view.component'; @Component({ selector: 'hbr-repository-gridview', templateUrl: './repository-gridview.component.html', - styleUrls: ['./repository-gridview.component.css'], + styleUrls: ['./repository-gridview.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) export class RepositoryGridviewComponent implements OnChanges, OnInit { diff --git a/src/ui_ng/lib/src/repository-listview/index.ts b/src/ui_ng/lib/src/repository-listview/index.ts deleted file mode 100644 index 651511113..000000000 --- a/src/ui_ng/lib/src/repository-listview/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { Type } from '@angular/core'; -import { RepositoryListviewComponent } from './repository-listview.component'; - -export const REPOSITORY_LISTVIEW_DIRECTIVES: Type[] = [ - RepositoryListviewComponent -]; \ No newline at end of file diff --git a/src/ui_ng/lib/src/repository-listview/repository-listview.component.css.ts b/src/ui_ng/lib/src/repository-listview/repository-listview.component.css.ts deleted file mode 100644 index 04111f7fe..000000000 --- a/src/ui_ng/lib/src/repository-listview/repository-listview.component.css.ts +++ /dev/null @@ -1,8 +0,0 @@ -export const REPOSITORY_LISTVIEW_STYLE = ` -.rightPos{ - position: absolute; - z-index: 100; - right: 35px; - margin-top: 4px; -} -`; \ No newline at end of file diff --git a/src/ui_ng/lib/src/repository-listview/repository-listview.component.html.ts b/src/ui_ng/lib/src/repository-listview/repository-listview.component.html.ts deleted file mode 100644 index 2d7cf8b9e..000000000 --- a/src/ui_ng/lib/src/repository-listview/repository-listview.component.html.ts +++ /dev/null @@ -1,41 +0,0 @@ -export const REPOSITORY_LISTVIEW_TEMPLATE = ` -
-
-
-
-
- - - -
-
-
-
- - - - - {{'REPOSITORY.NAME' | translate}} - {{'REPOSITORY.TAGS_COUNT' | translate}} - {{'REPOSITORY.PULL_COUNT' | translate}} - {{'REPOSITORY.PLACEHOLDER' | translate }} - - {{r.name}} - {{r.tags_count}} - {{r.pull_count}} - - - - - {{'CONFIG.SCANNING.DB_NOT_READY' | translate }} - - {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'REPOSITORY.OF' | translate}} - {{pagination.totalItems}} {{'REPOSITORY.ITEMS' | translate}} - - - -
-
- -
-`; \ No newline at end of file diff --git a/src/ui_ng/lib/src/repository-listview/repository-listview.component.spec.ts b/src/ui_ng/lib/src/repository-listview/repository-listview.component.spec.ts deleted file mode 100644 index 614efc261..000000000 --- a/src/ui_ng/lib/src/repository-listview/repository-listview.component.spec.ts +++ /dev/null @@ -1,173 +0,0 @@ -import { ComponentFixture, TestBed, async } from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; -import { DebugElement } from '@angular/core'; - -import { RouterTestingModule } from '@angular/router/testing'; - -import { SharedModule } from '../shared/shared.module'; -import { ConfirmationDialogComponent } from '../confirmation-dialog/confirmation-dialog.component'; -import { RepositoryListviewComponent } from './repository-listview.component'; -import { TagComponent } from '../tag/tag.component'; -import { FilterComponent } from '../filter/filter.component'; - -import { ErrorHandler } from '../error-handler/error-handler'; -import { Repository, RepositoryItem, Tag, SystemInfo } from '../service/interface'; -import { SERVICE_CONFIG, IServiceConfig } from '../service.config'; -import { RepositoryService, RepositoryDefaultService } from '../service/repository.service'; -import { TagService, TagDefaultService } from '../service/tag.service'; -import { SystemInfoService, SystemInfoDefaultService } from '../service/system-info.service'; -import { VULNERABILITY_DIRECTIVES } from '../vulnerability-scanning/index'; -import { PUSH_IMAGE_BUTTON_DIRECTIVES } from '../push-image/index'; -import { INLINE_ALERT_DIRECTIVES } from '../inline-alert/index'; -import { JobLogViewerComponent } from '../job-log-viewer/index'; - -import { click } from '../utils'; -import {LabelPieceComponent} from "../label-piece/label-piece.component"; - -describe('RepositoryComponentListView (inline template)', () => { - - let compRepo: RepositoryListviewComponent; - let fixtureRepo: ComponentFixture; - let repositoryService: RepositoryService; - let tagService: TagService; - let systemInfoService: SystemInfoService; - - let spyRepos: jasmine.Spy; - let spySystemInfo: jasmine.Spy; - - let mockSystemInfo: SystemInfo = { - "with_notary": true, - "with_admiral": false, - "admiral_endpoint": "NA", - "auth_mode": "db_auth", - "registry_url": "10.112.122.56", - "project_creation_restriction": "everyone", - "self_registration": true, - "has_ca_root": false, - "harbor_version": "v1.1.1-rc1-160-g565110d" - }; - - let mockRepoData: RepositoryItem[] = [ - { - "id": 1, - "name": "library/busybox", - "project_id": 1, - "description": "asdfsadf", - "pull_count": 0, - "star_count": 0, - "tags_count": 1 - }, - { - "id": 2, - "name": "library/nginx", - "project_id": 1, - "description": "asdf", - "pull_count": 0, - "star_count": 0, - "tags_count": 1 - } - ]; - - let mockRepo: Repository = { - metadata: {xTotalCount: 2}, - data: mockRepoData - }; - - let mockTagData: Tag[] = [ - { - "digest": "sha256:e5c82328a509aeb7c18c1d7fb36633dc638fcf433f651bdcda59c1cc04d3ee55", - "name": "1.11.5", - "size": "2049", - "architecture": "amd64", - "os": "linux", - "docker_version": "1.12.3", - "author": "NGINX Docker Maintainers \"docker-maint@nginx.com\"", - "created": new Date("2016-11-08T22:41:15.912313785Z"), - "signature": null, - "labels": [] - } - ]; - - let config: IServiceConfig = { - repositoryBaseEndpoint: '/api/repository/testing', - systemInfoEndpoint: '/api/systeminfo/testing', - targetBaseEndpoint: '/api/tag/testing' - }; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - imports: [ - SharedModule, - RouterTestingModule - ], - declarations: [ - RepositoryListviewComponent, - TagComponent, - LabelPieceComponent, - ConfirmationDialogComponent, - FilterComponent, - VULNERABILITY_DIRECTIVES, - PUSH_IMAGE_BUTTON_DIRECTIVES, - INLINE_ALERT_DIRECTIVES, - JobLogViewerComponent - ], - providers: [ - ErrorHandler, - { provide: SERVICE_CONFIG, useValue: config }, - { provide: RepositoryService, useClass: RepositoryDefaultService }, - { provide: TagService, useClass: TagDefaultService }, - { provide: SystemInfoService, useClass: SystemInfoDefaultService } - ] - }); - })); - - beforeEach(() => { - fixtureRepo = TestBed.createComponent(RepositoryListviewComponent); - compRepo = fixtureRepo.componentInstance; - compRepo.projectId = 1; - compRepo.hasProjectAdminRole = true; - - repositoryService = fixtureRepo.debugElement.injector.get(RepositoryService); - systemInfoService = fixtureRepo.debugElement.injector.get(SystemInfoService); - - spyRepos = spyOn(repositoryService, 'getRepositories').and.returnValues(Promise.resolve(mockRepo)); - spySystemInfo = spyOn(systemInfoService, 'getSystemInfo').and.returnValues(Promise.resolve(mockSystemInfo)); - fixtureRepo.detectChanges(); - }); - - it('should create', () => { - expect(compRepo).toBeTruthy(); - }); - - it('should load and render data', async(() => { - fixtureRepo.detectChanges(); - - fixtureRepo.whenStable().then(() => { - fixtureRepo.detectChanges(); - - let deRepo: DebugElement = fixtureRepo.debugElement.query(By.css('datagrid-cell')); - expect(deRepo).toBeTruthy(); - let elRepo: HTMLElement = deRepo.nativeElement; - expect(elRepo).toBeTruthy(); - expect(elRepo.textContent).toEqual('library/busybox'); - }); - })); - - it('should filter data by keyword', async(() => { - fixtureRepo.detectChanges(); - - fixtureRepo.whenStable().then(() => { - fixtureRepo.detectChanges(); - - compRepo.doSearchRepoNames('nginx'); - fixtureRepo.detectChanges(); - let de: DebugElement[] = fixtureRepo.debugElement.queryAll(By.css('datagrid-cell')); - expect(de).toBeTruthy(); - expect(de.length).toEqual(1); - let el: HTMLElement = de[0].nativeElement; - expect(el).toBeTruthy(); - expect(el.textContent).toEqual('library/nginx'); - }); - })); - -}); diff --git a/src/ui_ng/lib/src/repository-listview/repository-listview.component.ts b/src/ui_ng/lib/src/repository-listview/repository-listview.component.ts deleted file mode 100644 index 6440c9f05..000000000 --- a/src/ui_ng/lib/src/repository-listview/repository-listview.component.ts +++ /dev/null @@ -1,354 +0,0 @@ -import { - Component, - Input, - Output, - OnInit, - ViewChild, - ChangeDetectionStrategy, - ChangeDetectorRef, - EventEmitter, OnChanges, SimpleChanges -} from '@angular/core'; -import { Router } from '@angular/router'; -import { TranslateService } from '@ngx-translate/core'; -import { Comparator } from 'clarity-angular'; - -import { REPOSITORY_LISTVIEW_TEMPLATE } from './repository-listview.component.html'; -import { REPOSITORY_LISTVIEW_STYLE } from './repository-listview.component.css'; - -import { - Repository, - SystemInfo, - SystemInfoService, - RepositoryService, - RequestQueryParams, - RepositoryItem, - TagService -} from '../service/index'; -import { ErrorHandler } from '../error-handler/error-handler'; - -import { toPromise, CustomComparator } from '../utils'; - -import { ConfirmationState, ConfirmationTargets, ConfirmationButtons } from '../shared/shared.const'; - -import { ConfirmationDialogComponent } from '../confirmation-dialog/confirmation-dialog.component'; -import { ConfirmationMessage } from '../confirmation-dialog/confirmation-message'; -import { ConfirmationAcknowledgement } from '../confirmation-dialog/confirmation-state-message'; -import { Subscription } from 'rxjs/Subscription'; -import { Tag } from '../service/interface'; - -import { State } from "clarity-angular"; -import { - DEFAULT_PAGE_SIZE, - calculatePage, - doFiltering, - doSorting -} from '../utils'; -import {BatchInfo, BathInfoChanges} from "../confirmation-dialog/confirmation-batch-message"; -import {Observable} from "rxjs/Observable"; - -@Component({ - selector: 'hbr-repository-listview', - template: REPOSITORY_LISTVIEW_TEMPLATE, - styles: [REPOSITORY_LISTVIEW_STYLE], - changeDetection: ChangeDetectionStrategy.OnPush -}) -export class RepositoryListviewComponent implements OnChanges, OnInit { - signedCon: {[key: string]: any | string[]} = {}; - @Input() projectId: number; - @Input() projectName = 'unknown'; - @Input() urlPrefix: string; - - @Input() hasSignedIn: boolean; - @Input() hasProjectAdminRole: boolean; - @Output() repoClickEvent = new EventEmitter(); - - lastFilteredRepoName: string; - repositories: RepositoryItem[]; - systemInfo: SystemInfo; - selectedRow: RepositoryItem[] = []; - - loading = true; - - @ViewChild('confirmationDialog') - confirmationDialog: ConfirmationDialogComponent; - - batchDelectionInfos: BatchInfo[] = []; - pullCountComparator: Comparator = new CustomComparator('pull_count', 'number'); - - tagsCountComparator: Comparator = new CustomComparator('tags_count', 'number'); - - pageSize: number = DEFAULT_PAGE_SIZE; - currentPage = 1; - totalCount = 0; - currentState: State; - - constructor( - private errorHandler: ErrorHandler, - private translateService: TranslateService, - private repositoryService: RepositoryService, - private systemInfoService: SystemInfoService, - private tagService: TagService, - private ref: ChangeDetectorRef, - private router: Router) { } - - public get registryUrl(): string { - return this.systemInfo ? this.systemInfo.registry_url : ''; - } - - public get withNotary(): boolean { - return this.systemInfo ? this.systemInfo.with_notary : false; - } - - public get withClair(): boolean { - return this.systemInfo ? this.systemInfo.with_clair : false; - } - - public get isClairDBReady(): boolean { - return this.systemInfo && - this.systemInfo.clair_vulnerability_status && - this.systemInfo.clair_vulnerability_status.overall_last_update > 0; - } - - public get showDBStatusWarning(): boolean { - return this.withClair && !this.isClairDBReady; - } - - ngOnChanges(changes: SimpleChanges): void { - if (changes['projectId'] && changes['projectId'].currentValue) { - this.refresh(); - } - } - - ngOnInit(): void { - // Get system info for tag views - toPromise(this.systemInfoService.getSystemInfo()) - .then(systemInfo => this.systemInfo = systemInfo) - .catch(error => this.errorHandler.error(error)); - - this.lastFilteredRepoName = ''; - } - - confirmDeletion(message: ConfirmationAcknowledgement) { - if (message && - message.source === ConfirmationTargets.REPOSITORY && - message.state === ConfirmationState.CONFIRMED) { - - let promiseLists: any[] = []; - let repoNames: string[] = message.data.split(','); - - repoNames.forEach(repoName => { - promiseLists.push(this.delOperate(repoName)); - }); - - Promise.all(promiseLists).then((item) => { - this.selectedRow = []; - this.refresh(); - let st: State = this.getStateAfterDeletion(); - if (!st) { - this.refresh(); - } else { - this.clrLoad(st); - } - }); - } - } - - delOperate(repoName: string) { - let findedList = this.batchDelectionInfos.find(data => data.name === repoName); - if (this.signedCon[repoName].length !== 0) { - Observable.forkJoin(this.translateService.get('BATCH.DELETED_FAILURE'), - this.translateService.get('REPOSITORY.DELETION_TITLE_REPO_SIGNED')).subscribe(res => { - findedList = BathInfoChanges(findedList, res[0], false, true, res[1]); - }); - } else { - return toPromise(this.repositoryService - .deleteRepository(repoName)) - .then( - response => { - this.translateService.get('BATCH.DELETED_SUCCESS').subscribe(res => { - findedList = BathInfoChanges(findedList, res); - }); - }).catch(error => { - if (error.status === "412") { - Observable.forkJoin(this.translateService.get('BATCH.DELETED_FAILURE'), - this.translateService.get('REPOSITORY.TAGS_SIGNED')).subscribe(res => { - findedList = BathInfoChanges(findedList, res[0], false, true, res[1]); - }); - return; - } - if (error.status === 503) { - Observable.forkJoin(this.translateService.get('BATCH.DELETED_FAILURE'), - this.translateService.get('REPOSITORY.TAGS_NO_DELETE')).subscribe(res => { - findedList = BathInfoChanges(findedList, res[0], false, true, res[1]); - }); - return; - } - this.translateService.get('BATCH.DELETED_FAILURE').subscribe(res => { - findedList = BathInfoChanges(findedList, res, false, true); - }); - }); - } - } - - doSearchRepoNames(repoName: string) { - this.lastFilteredRepoName = repoName; - this.currentPage = 1; - - let st: State = this.currentState; - if (!st) { - st = { page: {} }; - } - st.page.size = this.pageSize; - st.page.from = 0; - st.page.to = this.pageSize - 1; - this.clrLoad(st); - } - - saveSignatures(event: {[key: string]: string[]}): void { - Object.assign(this.signedCon, event); - } - - deleteRepos(repoLists: RepositoryItem[]) { - if (repoLists && repoLists.length) { - let repoNames: string[] = []; - this.batchDelectionInfos = []; - let repArr: any[] = []; - - repoLists.forEach(repo => { - repoNames.push(repo.name); - let initBatchMessage = new BatchInfo(); - initBatchMessage.name = repo.name; - this.batchDelectionInfos.push(initBatchMessage); - - if (!this.signedCon[repo.name]) { - repArr.push(this.getTagInfo(repo.name)); - } - }); - - Promise.all(repArr).then(() => { - this.confirmationDialogSet('REPOSITORY.DELETION_TITLE_REPO', '', repoNames.join(','), 'REPOSITORY.DELETION_SUMMARY_REPO', ConfirmationButtons.DELETE_CANCEL); - }); - } - } - - getTagInfo(repoName: string): Promise { - // this.signedNameArr = []; - this.signedCon[repoName] = []; - return toPromise(this.tagService - .getTags(repoName)) - .then(items => { - items.forEach((t: Tag) => { - if (t.signature !== null) { - this.signedCon[repoName].push(t.name); - } - }); - }) - .catch(error => this.errorHandler.error(error)); - } - - signedDataSet(repoName: string): void { - let signature = ''; - if (this.signedCon[repoName].length === 0) { - this.confirmationDialogSet('REPOSITORY.DELETION_TITLE_REPO', signature, repoName, 'REPOSITORY.DELETION_SUMMARY_REPO', ConfirmationButtons.DELETE_CANCEL); - return; - } - signature = this.signedCon[repoName].join(','); - this.confirmationDialogSet('REPOSITORY.DELETION_TITLE_REPO_SIGNED', signature, repoName, 'REPOSITORY.DELETION_SUMMARY_REPO_SIGNED', ConfirmationButtons.CLOSE); - } - - confirmationDialogSet(summaryTitle: string, signature: string, repoName: string, summaryKey: string, button: ConfirmationButtons): void { - this.translateService.get(summaryKey, - { - repoName: repoName, - signedImages: signature, - }) - .subscribe((res: string) => { - summaryKey = res; - let message = new ConfirmationMessage( - summaryTitle, - summaryKey, - repoName, - repoName, - ConfirmationTargets.REPOSITORY, - button); - this.confirmationDialog.open(message); - - let hnd = setInterval(() => this.ref.markForCheck(), 100); - setTimeout(() => clearInterval(hnd), 5000); - }); - } - - selectedChange(): void { - let hnd = setInterval(() => this.ref.markForCheck(), 100); - setTimeout(() => clearInterval(hnd), 2000); - } - refresh() { - this.doSearchRepoNames(''); - } - - clrLoad(state: State): void { - this.selectedRow = []; - // Keep it for future filtering and sorting - this.currentState = state; - - let pageNumber: number = calculatePage(state); - if (pageNumber <= 0) { pageNumber = 1; } - - // Pagination - let params: RequestQueryParams = new RequestQueryParams(); - params.set("page", '' + pageNumber); - params.set("page_size", '' + this.pageSize); - - this.loading = true; - - toPromise(this.repositoryService.getRepositories( - this.projectId, - this.lastFilteredRepoName, - params)) - .then((repo: Repository) => { - this.totalCount = repo.metadata.xTotalCount; - this.repositories = repo.data; - - this.signedCon = {}; - // Do filtering and sorting - this.repositories = doFiltering(this.repositories, state); - this.repositories = doSorting(this.repositories, state); - - this.loading = false; - }) - .catch(error => { - this.loading = false; - this.errorHandler.error(error); - }); - - // Force refresh view - let hnd = setInterval(() => this.ref.markForCheck(), 100); - setTimeout(() => clearInterval(hnd), 5000); - } - - getStateAfterDeletion(): State { - let total: number = this.totalCount - 1; - if (total <= 0) { return null; } - - let totalPages: number = Math.ceil(total / this.pageSize); - let targetPageNumber: number = this.currentPage; - - if (this.currentPage > totalPages) { - targetPageNumber = totalPages; // Should == currentPage -1 - } - - let st: State = this.currentState; - if (!st) { - st = { page: {} }; - } - st.page.size = this.pageSize; - st.page.from = (targetPageNumber - 1) * this.pageSize; - st.page.to = targetPageNumber * this.pageSize - 1; - - return st; - } - - watchRepoClickEvt(repo: RepositoryItem) { - this.repoClickEvent.emit(repo); - } -} \ No newline at end of file diff --git a/src/ui_ng/lib/src/repository-stackview/index.ts b/src/ui_ng/lib/src/repository-stackview/index.ts deleted file mode 100644 index 601a30a5c..000000000 --- a/src/ui_ng/lib/src/repository-stackview/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { Type } from '@angular/core'; -import { RepositoryStackviewComponent } from './repository-stackview.component'; - -export const REPOSITORY_STACKVIEW_DIRECTIVES: Type[] = [ - RepositoryStackviewComponent -]; \ No newline at end of file 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 deleted file mode 100644 index fe0081042..000000000 --- a/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.css.ts +++ /dev/null @@ -1,47 +0,0 @@ -export const REPOSITORY_STACKVIEW_STYLES: string = ` -.option-right { - padding-right: 16px; -} -.sub-grid-custom { - left: 40px; -} -.refresh-btn { - cursor: pointer; -} -.refresh-btn:hover { - color: #007CBB; -} - -:host >>> .datagrid .datagrid-body { - overflow-x: hidden; -} - -:host >>> .datagrid .datagrid-foot { - border-top: 1px solid #ccc; -} - -:host >>> .datagrid .datagrid-body .datagrid-row { - background-color: #ccc; -} - -:host >>> .datagrid-body .datagrid-row .datagrid-row-master{ - background-color: #FFFFFF; -} - -:host >>> .datagrid .datagrid-placeholder-container { - display: none; -} -:host >>> .datagrid-overlay-wrapper{margin-top:24px;} - -.db-status-warning { - position: absolute; - left: 24px; - display: inline-block; -} -.rightPos{ - position: absolute; - z-index: 100; - right: 35px; - margin-top: 4px; -} -`; 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 deleted file mode 100644 index 004cecef7..000000000 --- a/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.html.ts +++ /dev/null @@ -1,42 +0,0 @@ -export const REPOSITORY_STACKVIEW_TEMPLATE: string = ` -
-
-
-
-
- - - -
-
-
-
- - {{'REPOSITORY.NAME' | translate}} - {{'REPOSITORY.TAGS_COUNT' | translate}} - {{'REPOSITORY.PULL_COUNT' | translate}} - {{'REPOSITORY.PLACEHOLDER' | translate}} - - - - - {{r.name}} - {{r.tags_count}} - {{r.pull_count}} - - - - - - {{'CONFIG.SCANNING.DB_NOT_READY' | translate }} - - {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'REPOSITORY.OF' | translate}} - {{pagination.totalItems}} {{'REPOSITORY.ITEMS' | translate}} - - - -
-
- -
-`; \ No newline at end of file diff --git a/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.spec.ts b/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.spec.ts deleted file mode 100644 index c58052032..000000000 --- a/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.spec.ts +++ /dev/null @@ -1,224 +0,0 @@ -import { ComponentFixture, TestBed, async } from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; -import { DebugElement } from '@angular/core'; - -import { SharedModule } from '../shared/shared.module'; -import { ConfirmationDialogComponent } from '../confirmation-dialog/confirmation-dialog.component'; -import { RepositoryStackviewComponent } from './repository-stackview.component'; -import { TagComponent } from '../tag/tag.component'; -import { FilterComponent } from '../filter/filter.component'; - -import { ErrorHandler } from '../error-handler/error-handler'; -import {Repository, RepositoryItem, Tag, SystemInfo, Label} from '../service/interface'; -import { SERVICE_CONFIG, IServiceConfig } from '../service.config'; -import { RepositoryService, RepositoryDefaultService } from '../service/repository.service'; -import { TagService, TagDefaultService } from '../service/tag.service'; -import { SystemInfoService, SystemInfoDefaultService } from '../service/system-info.service'; -import { VULNERABILITY_DIRECTIVES } from '../vulnerability-scanning/index'; -import { PUSH_IMAGE_BUTTON_DIRECTIVES } from '../push-image/index'; -import { INLINE_ALERT_DIRECTIVES } from '../inline-alert/index'; -import { JobLogViewerComponent } from '../job-log-viewer/index'; - -import { click } from '../utils'; -import {LabelPieceComponent} from "../label-piece/label-piece.component"; -import {LabelDefaultService, LabelService} from "../service/label.service"; - -describe('RepositoryComponentStackview (inline template)', () => { - - let compRepo: RepositoryStackviewComponent; - let fixtureRepo: ComponentFixture; - let repositoryService: RepositoryService; - let tagService: TagService; - let labelService: LabelService; - let systemInfoService: SystemInfoService; - - let spyRepos: jasmine.Spy; - let spyTags: jasmine.Spy; - let spyLabels: jasmine.Spy; - let spySystemInfo: jasmine.Spy; - - let mockSystemInfo: SystemInfo = { - "with_notary": true, - "with_admiral": false, - "admiral_endpoint": "NA", - "auth_mode": "db_auth", - "registry_url": "10.112.122.56", - "project_creation_restriction": "everyone", - "self_registration": true, - "has_ca_root": false, - "harbor_version": "v1.1.1-rc1-160-g565110d" - }; - - let mockRepoData: RepositoryItem[] = [ - { - "id": 1, - "name": "library/busybox", - "project_id": 1, - "description": "", - "pull_count": 0, - "star_count": 0, - "tags_count": 1 - }, - { - "id": 2, - "name": "library/nginx", - "project_id": 1, - "description": "", - "pull_count": 0, - "star_count": 0, - "tags_count": 1 - } - ]; - - let mockRepo: Repository = { - metadata: {xTotalCount: 2}, - data: mockRepoData - }; - - let mockTagData: Tag[] = [ - { - "digest": "sha256:e5c82328a509aeb7c18c1d7fb36633dc638fcf433f651bdcda59c1cc04d3ee55", - "name": "1.11.5", - "size": "2049", - "architecture": "amd64", - "os": "linux", - "docker_version": "1.12.3", - "author": "NGINX Docker Maintainers \"docker-maint@nginx.com\"", - "created": new Date("2016-11-08T22:41:15.912313785Z"), - "signature": null, - "labels": [] - } - ]; - - let mockLabels: Label[] = [ - { - color: "#9b0d54", - creation_time: "", - description: "", - id: 1, - name: "label0-g", - project_id: 0, - scope: "g", - update_time: "", - }, - { - color: "#9b0d54", - creation_time: "", - description: "", - id: 2, - name: "label1-g", - project_id: 0, - scope: "g", - update_time: "", - } - ]; - - let config: IServiceConfig = { - repositoryBaseEndpoint: '/api/repository/testing', - systemInfoEndpoint: '/api/systeminfo/testing', - targetBaseEndpoint: '/api/tag/testing' - }; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - imports: [ - SharedModule - ], - declarations: [ - RepositoryStackviewComponent, - TagComponent, - LabelPieceComponent, - ConfirmationDialogComponent, - FilterComponent, - VULNERABILITY_DIRECTIVES, - PUSH_IMAGE_BUTTON_DIRECTIVES, - INLINE_ALERT_DIRECTIVES, - JobLogViewerComponent - ], - providers: [ - ErrorHandler, - { provide: SERVICE_CONFIG, useValue: config }, - { provide: RepositoryService, useClass: RepositoryDefaultService }, - { provide: TagService, useClass: TagDefaultService }, - { provide: SystemInfoService, useClass: SystemInfoDefaultService }, - {provide: LabelService, useClass: LabelDefaultService} - ] - }); - })); - - beforeEach(() => { - fixtureRepo = TestBed.createComponent(RepositoryStackviewComponent); - compRepo = fixtureRepo.componentInstance; - compRepo.projectId = 1; - compRepo.hasProjectAdminRole = true; - - repositoryService = fixtureRepo.debugElement.injector.get(RepositoryService); - systemInfoService = fixtureRepo.debugElement.injector.get(SystemInfoService); - - spyRepos = spyOn(repositoryService, 'getRepositories').and.returnValues(Promise.resolve(mockRepo)); - spySystemInfo = spyOn(systemInfoService, 'getSystemInfo').and.returnValues(Promise.resolve(mockSystemInfo)); - - labelService = fixtureRepo.debugElement.injector.get(LabelService); - - spyLabels = spyOn(labelService, 'getLabels').and.returnValues(Promise.resolve(mockLabels)); - - fixtureRepo.detectChanges(); - }); - - it('should create', () => { - expect(compRepo).toBeTruthy(); - }); - - it('should load and render data', async(() => { - fixtureRepo.detectChanges(); - - fixtureRepo.whenStable().then(() => { - fixtureRepo.detectChanges(); - - let deRepo: DebugElement = fixtureRepo.debugElement.query(By.css('datagrid-cell')); - expect(deRepo).toBeTruthy(); - let elRepo: HTMLElement = deRepo.nativeElement; - expect(elRepo).toBeTruthy(); - expect(elRepo.textContent).toEqual('library/busybox'); - }); - })); - - it('should filter data by keyword', async(() => { - fixtureRepo.detectChanges(); - - fixtureRepo.whenStable().then(() => { - fixtureRepo.detectChanges(); - - compRepo.doSearchRepoNames('nginx'); - fixtureRepo.detectChanges(); - let de: DebugElement[] = fixtureRepo.debugElement.queryAll(By.css('datagrid-cell')); - expect(de).toBeTruthy(); - expect(de.length).toEqual(1); - let el: HTMLElement = de[0].nativeElement; - expect(el).toBeTruthy(); - expect(el.textContent).toEqual('library/nginx'); - }); - })); - - it('should display embedded tag view when click >', async(() => { - fixtureRepo.detectChanges(); - - fixtureRepo.whenStable().then(() => { - fixtureRepo.detectChanges(); - - let el: HTMLElement = fixtureRepo.nativeElement.querySelector('.datagrid-expandable-caret'); - expect(el).toBeTruthy(); - let button: HTMLButtonElement = el.querySelector('button'); - expect(button).toBeTruthy(); - click(button); - - fixtureRepo.detectChanges(); - let el2: HTMLElement = fixtureRepo.nativeElement.querySelector('.datagrid-row-detail'); - expect(el2).toBeTruthy(); - let el3: Element = el2.querySelector(".datagrid-cell"); - expect(el3).toBeTruthy(); - expect(el3.textContent).toEqual('1.11.5'); - }); - })); - -}); \ No newline at end of file diff --git a/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.ts b/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.ts deleted file mode 100644 index 1ec92911d..000000000 --- a/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.ts +++ /dev/null @@ -1,298 +0,0 @@ -import { - Component, - Input, - Output, - OnInit, - ViewChild, - ChangeDetectionStrategy, - ChangeDetectorRef, - EventEmitter, OnChanges, SimpleChanges -} from '@angular/core'; -import { TranslateService } from '@ngx-translate/core'; -import { Comparator } from 'clarity-angular'; - -import { REPOSITORY_STACKVIEW_TEMPLATE } from './repository-stackview.component.html'; -import { REPOSITORY_STACKVIEW_STYLES } from './repository-stackview.component.css'; - -import { - Repository, - SystemInfo, - SystemInfoService, - RepositoryService, - RequestQueryParams, - RepositoryItem -} from '../service/index'; -import { ErrorHandler } from '../error-handler/error-handler'; - -import { toPromise, CustomComparator } from '../utils'; - -import { ConfirmationState, ConfirmationTargets, ConfirmationButtons } from '../shared/shared.const'; - -import { ConfirmationDialogComponent } from '../confirmation-dialog/confirmation-dialog.component'; -import { ConfirmationMessage } from '../confirmation-dialog/confirmation-message'; -import { ConfirmationAcknowledgement } from '../confirmation-dialog/confirmation-state-message'; -import { Subscription } from 'rxjs/Subscription'; -import { Tag, TagClickEvent } from '../service/interface'; - -import { State } from "clarity-angular"; -import { - DEFAULT_PAGE_SIZE, - calculatePage, - doFiltering, - doSorting -} from '../utils'; -import {TagService} from '../service/index'; - -@Component({ - selector: 'hbr-repository-stackview', - template: REPOSITORY_STACKVIEW_TEMPLATE, - styles: [REPOSITORY_STACKVIEW_STYLES], - changeDetection: ChangeDetectionStrategy.OnPush -}) -export class RepositoryStackviewComponent implements OnChanges, OnInit { - signedCon: {[key: string]: any | string[]} = {}; - - @Input() projectId: number; - @Input() projectName: string = "unknown"; - - @Input() hasSignedIn: boolean; - @Input() hasProjectAdminRole: boolean; - @Output() tagClickEvent = new EventEmitter(); - - lastFilteredRepoName: string; - repositories: RepositoryItem[]; - systemInfo: SystemInfo; - - loading: boolean = true; - - @ViewChild('confirmationDialog') - confirmationDialog: ConfirmationDialogComponent; - - pullCountComparator: Comparator = new CustomComparator('pull_count', 'number'); - - tagsCountComparator: Comparator = new CustomComparator('tags_count', 'number'); - - pageSize: number = DEFAULT_PAGE_SIZE; - currentPage: number = 1; - totalCount: number = 0; - currentState: State; - - constructor( - private errorHandler: ErrorHandler, - private translateService: TranslateService, - private repositoryService: RepositoryService, - private systemInfoService: SystemInfoService, - private translate: TranslateService, - private tagService: TagService, - private ref: ChangeDetectorRef) { } - - public get registryUrl(): string { - return this.systemInfo ? this.systemInfo.registry_url : ""; - } - - public get withNotary(): boolean { - return this.systemInfo ? this.systemInfo.with_notary : false; - } - - public get withClair(): boolean { - return this.systemInfo ? this.systemInfo.with_clair : false; - } - - public get isClairDBReady(): boolean { - return this.systemInfo && - this.systemInfo.clair_vulnerability_status && - this.systemInfo.clair_vulnerability_status.overall_last_update > 0; - } - - public get showDBStatusWarning(): boolean { - return this.withClair && !this.isClairDBReady; - } - - confirmDeletion(message: ConfirmationAcknowledgement) { - if (message && - message.source === ConfirmationTargets.REPOSITORY && - message.state === ConfirmationState.CONFIRMED) { - let repoName = message.data; - toPromise(this.repositoryService - .deleteRepository(repoName)) - .then( - response => { - this.refresh(); - let st: State = this.getStateAfterDeletion(); - if (!st) { - this.refresh(); - } else { - this.clrLoad(st); - } - this.translateService.get('REPOSITORY.DELETED_REPO_SUCCESS') - .subscribe(res => this.errorHandler.info(res)); - }).catch(error => { - if (error.status === "412"){ - this.translateService.get('REPOSITORY.TAGS_SIGNED') - .subscribe(res => this.errorHandler.info(res)); - return; - } - this.errorHandler.error(error); - }); - } - } - - ngOnChanges(changes: SimpleChanges): void { - if (changes['projectId'] && changes['projectId'].currentValue) { - this.refresh(); - } - } - - ngOnInit(): void { - //Get system info for tag views - toPromise(this.systemInfoService.getSystemInfo()) - .then(systemInfo => this.systemInfo = systemInfo) - .catch(error => this.errorHandler.error(error)); - - this.lastFilteredRepoName = ''; - } - - doSearchRepoNames(repoName: string) { - this.lastFilteredRepoName = repoName; - this.currentPage = 1; - - let st: State = this.currentState; - if (!st) { - st = { page: {} }; - } - st.page.size = this.pageSize; - st.page.from = 0; - st.page.to = this.pageSize - 1; - this.clrLoad(st); - } - - saveSignatures(event: {[key: string]: string[]}): void { - Object.assign(this.signedCon, event); - } - - deleteRepo(repoName: string) { - if (this.signedCon[repoName]) { - this.signedDataSet(repoName); - } else { - this.getTagInfo(repoName).then(() => { - this.signedDataSet(repoName); - }); - } - } - getTagInfo(repoName: string): Promise { - // this.signedNameArr = []; - this.signedCon[repoName] = []; - return toPromise(this.tagService - .getTags(repoName)) - .then(items => { - items.forEach((t: Tag) => { - if (t.signature !== null) { - this.signedCon[repoName].push(t.name); - } - }); - }) - .catch(error => this.errorHandler.error(error)); - } - - signedDataSet(repoName: string): void { - let signature: string = ''; - if (this.signedCon[repoName].length === 0) { - this.confirmationDialogSet('REPOSITORY.DELETION_TITLE_REPO', signature, repoName, 'REPOSITORY.DELETION_SUMMARY_REPO', ConfirmationButtons.DELETE_CANCEL); - return; - } - signature = this.signedCon[repoName].join(','); - this.confirmationDialogSet('REPOSITORY.DELETION_TITLE_REPO_SIGNED', signature, repoName, 'REPOSITORY.DELETION_SUMMARY_REPO_SIGNED', ConfirmationButtons.CLOSE); - } - - confirmationDialogSet(summaryTitle: string, signature: string, repoName: string, summaryKey: string, button: ConfirmationButtons): void { - this.translate.get(summaryKey, - { - repoName: repoName, - signedImages: signature, - }) - .subscribe((res: string) => { - summaryKey = res; - let message = new ConfirmationMessage( - summaryTitle, - summaryKey, - repoName, - repoName, - ConfirmationTargets.REPOSITORY, - button); - this.confirmationDialog.open(message); - - let hnd = setInterval(() => this.ref.markForCheck(), 100); - setTimeout(() => clearInterval(hnd), 5000); - }); - } - - refresh() { - this.doSearchRepoNames(""); - } - - watchTagClickEvt(tagClickEvt: TagClickEvent): void { - this.tagClickEvent.emit(tagClickEvt); - } - - clrLoad(state: State): void { - //Keep it for future filtering and sorting - this.currentState = state; - - let pageNumber: number = calculatePage(state); - if (pageNumber <= 0) { pageNumber = 1; } - - //Pagination - let params: RequestQueryParams = new RequestQueryParams(); - params.set("page", '' + pageNumber); - params.set("page_size", '' + this.pageSize); - - this.loading = true; - - toPromise(this.repositoryService.getRepositories( - this.projectId, - this.lastFilteredRepoName, - params)) - .then((repo: Repository) => { - this.totalCount = repo.metadata.xTotalCount; - this.repositories = repo.data; - - this.signedCon = {}; - //Do filtering and sorting - this.repositories = doFiltering(this.repositories, state); - this.repositories = doSorting(this.repositories, state); - - this.loading = false; - }) - .catch(error => { - this.loading = false; - this.errorHandler.error(error); - }); - - //Force refresh view - let hnd = setInterval(() => this.ref.markForCheck(), 100); - setTimeout(() => clearInterval(hnd), 5000); - } - - getStateAfterDeletion(): State { - let total: number = this.totalCount - 1; - if (total <= 0) { return null; } - - let totalPages: number = Math.ceil(total / this.pageSize); - let targetPageNumber: number = this.currentPage; - - if (this.currentPage > totalPages) { - targetPageNumber = totalPages;//Should == currentPage -1 - } - - let st: State = this.currentState; - if (!st) { - st = { page: {} }; - } - st.page.size = this.pageSize; - st.page.from = (targetPageNumber - 1) * this.pageSize; - st.page.to = targetPageNumber * this.pageSize - 1; - - return st; - } -} - diff --git a/src/ui_ng/lib/src/repository/repository.component.html.ts b/src/ui_ng/lib/src/repository/repository.component.html similarity index 98% rename from src/ui_ng/lib/src/repository/repository.component.html.ts rename to src/ui_ng/lib/src/repository/repository.component.html index 82cf1921e..82a4ed392 100644 --- a/src/ui_ng/lib/src/repository/repository.component.html.ts +++ b/src/ui_ng/lib/src/repository/repository.component.html @@ -1,4 +1,3 @@ -export const REPOSITORY_TEMPLATE = `
@@ -50,5 +49,4 @@ export const REPOSITORY_TEMPLATE = `
- -`; \ No newline at end of file + \ No newline at end of file diff --git a/src/ui_ng/lib/src/repository/repository.component.css.ts b/src/ui_ng/lib/src/repository/repository.component.scss similarity index 93% rename from src/ui_ng/lib/src/repository/repository.component.css.ts rename to src/ui_ng/lib/src/repository/repository.component.scss index d86789591..089b89a65 100644 --- a/src/ui_ng/lib/src/repository/repository.component.css.ts +++ b/src/ui_ng/lib/src/repository/repository.component.scss @@ -1,4 +1,4 @@ -export const REPOSITORY_STYLE = `.option-right { +.option-right { padding-right: 16px; margin-bottom: 12px; } @@ -56,5 +56,4 @@ export const REPOSITORY_STYLE = `.option-right { harbor-tag { position: relative; top: 24px; -} -`; +} \ No newline at end of file diff --git a/src/ui_ng/lib/src/repository/repository.component.spec.ts b/src/ui_ng/lib/src/repository/repository.component.spec.ts index cabf45c49..f7c506644 100644 --- a/src/ui_ng/lib/src/repository/repository.component.spec.ts +++ b/src/ui_ng/lib/src/repository/repository.component.spec.ts @@ -6,7 +6,8 @@ import { RouterTestingModule } from '@angular/router/testing'; import { SharedModule } from '../shared/shared.module'; import { ConfirmationDialogComponent } from '../confirmation-dialog/confirmation-dialog.component'; import { RepositoryComponent } from './repository.component'; -import { RepositoryListviewComponent } from '../repository-listview/repository-listview.component'; +import { RepositoryGridviewComponent } from '../repository-gridview/repository-gridview.component'; +import { GridViewComponent } from '../gridview/grid-view.component'; import { FilterComponent } from '../filter/filter.component'; import { TagComponent } from '../tag/tag.component'; import { VULNERABILITY_DIRECTIVES } from '../vulnerability-scanning/index'; @@ -154,7 +155,8 @@ describe('RepositoryComponent (inline template)', () => { ], declarations: [ RepositoryComponent, - RepositoryListviewComponent, + GridViewComponent, + RepositoryGridviewComponent, ConfirmationDialogComponent, FilterComponent, TagComponent, diff --git a/src/ui_ng/lib/src/repository/repository.component.ts b/src/ui_ng/lib/src/repository/repository.component.ts index beb1cf0dd..bc5988430 100644 --- a/src/ui_ng/lib/src/repository/repository.component.ts +++ b/src/ui_ng/lib/src/repository/repository.component.ts @@ -23,9 +23,6 @@ import { ConfirmationState, ConfirmationTargets } from '../shared/shared.const'; import { ConfirmationDialogComponent, ConfirmationMessage, ConfirmationAcknowledgement } from '../confirmation-dialog/index'; import { toPromise } from '../utils'; -import { REPOSITORY_TEMPLATE } from './repository.component.html'; -import { REPOSITORY_STYLE } from './repository.component.css'; - const TabLinkContentMap: {[index: string]: string} = { 'repo-info': 'info', 'repo-image': 'image' @@ -33,8 +30,8 @@ const TabLinkContentMap: {[index: string]: string} = { @Component({ selector: 'hbr-repository', - template: REPOSITORY_TEMPLATE, - styles: [REPOSITORY_STYLE] + templateUrl: './repository.component.html', + styleUrls: ['./repository.component.scss'] }) export class RepositoryComponent implements OnInit { signedCon: {[key: string]: any | string[]} = {}; diff --git a/src/ui_ng/lib/src/tag/tag-detail.component.html.ts b/src/ui_ng/lib/src/tag/tag-detail.component.html similarity index 98% rename from src/ui_ng/lib/src/tag/tag-detail.component.html.ts rename to src/ui_ng/lib/src/tag/tag-detail.component.html index 450cbb93e..1ae3782c3 100644 --- a/src/ui_ng/lib/src/tag/tag-detail.component.html.ts +++ b/src/ui_ng/lib/src/tag/tag-detail.component.html @@ -1,4 +1,3 @@ -export const TAG_DETAIL_HTML: string = `
@@ -72,5 +71,4 @@ export const TAG_DETAIL_HTML: string = `
-
-`; \ No newline at end of file + \ No newline at end of file diff --git a/src/ui_ng/lib/src/tag/tag-detail.component.css.ts b/src/ui_ng/lib/src/tag/tag-detail.component.scss similarity index 97% rename from src/ui_ng/lib/src/tag/tag-detail.component.css.ts rename to src/ui_ng/lib/src/tag/tag-detail.component.scss index ca6e1e360..1d6e71751 100644 --- a/src/ui_ng/lib/src/tag/tag-detail.component.css.ts +++ b/src/ui_ng/lib/src/tag/tag-detail.component.scss @@ -1,4 +1,3 @@ -export const TAG_DETAIL_STYLES: string = ` .overview-section { padding-bottom: 36px; } @@ -124,6 +123,4 @@ margin-left:20px;} } .second-column div, .fourth-column div, .image-detail-value div{ height: 24px; -} - -`; \ No newline at end of file +} \ No newline at end of file diff --git a/src/ui_ng/lib/src/tag/tag-detail.component.ts b/src/ui_ng/lib/src/tag/tag-detail.component.ts index 5de443831..8512b4ac4 100644 --- a/src/ui_ng/lib/src/tag/tag-detail.component.ts +++ b/src/ui_ng/lib/src/tag/tag-detail.component.ts @@ -1,8 +1,5 @@ import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core'; -import { TAG_DETAIL_STYLES } from './tag-detail.component.css'; -import { TAG_DETAIL_HTML } from './tag-detail.component.html'; - import { TagService, Tag, VulnerabilitySeverity } from '../service/index'; import { toPromise } from '../utils'; import { ErrorHandler } from '../error-handler/index'; @@ -10,8 +7,8 @@ import {Label} from "../service/interface"; @Component({ selector: 'hbr-tag-detail', - styles: [TAG_DETAIL_STYLES], - template: TAG_DETAIL_HTML, + templateUrl: './tag-detail.component.html', + styleUrls: ['./tag-detail.component.scss'], providers: [] }) diff --git a/src/ui_ng/lib/src/tag/tag.component.css.ts b/src/ui_ng/lib/src/tag/tag.component.css.ts deleted file mode 100644 index 7e5c8ceca..000000000 --- a/src/ui_ng/lib/src/tag/tag.component.css.ts +++ /dev/null @@ -1,121 +0,0 @@ -export const TAG_STYLE = ` -.option-right { - padding-right: 18px; - padding-bottom: 6px; -} - -.refresh-btn { - margin-top:8px; - cursor: pointer; -} - -.refresh-btn:hover { - color: #007CBB; -} - -.sub-header-title { - margin: 12px 0; -} - -.embeded-datagrid { - width: 98%; - float:right; /*add for issue #2688*/ -} - -.hidden-tag { - display: block; height: 0; -} - -:host >>> .datagrid-placeholder { - display: none; -} - -.truncated { - display: inline-block; - overflow: hidden; - white-space: nowrap; - text-overflow:ellipsis; -} - -.copy-failed { - color: red; - margin-right: 6px; -} - -:host >>> .datagrid clr-dg-column { - min-width: 80px; -} -.rightPos{ - position: absolute; - z-index: 100; - right: 35px; - margin-top: 4px; -} - -.btn-group .dropdown-menu clr-icon{display: block;} -.dropdown-menu .dropdown-item{position: relative;padding-left:.5rem; padding-right:.5rem;line-height:1.0} -.dropdown-menu input{position: relative;margin-left:.5rem; margin-right:.5rem;} -.pull-left{display:inline-block;float:left;} -.pull-right{display:inline-block; float:right;} -.btn-link{display:inline-flex;width: 15px;min-width:15px; color:black; vertical-align: super; } -.trigger-item, .signpost-item{display: inline;} -.signpost-content-body .label{margin:.3rem;} -.labelDiv{position: absolute; left:34px;top:5px;} -.datagrid-action-bar{z-index:10;} -.trigger-item hbr-label-piece{display: flex !important;margin: 6px 0;} -:host >>> .signpost-content{min-width:4rem;} -:host >>> .signpost-content-body{padding:0 .4rem;} -:host >>> .signpost-content-header{display:none;} -.filterLabelPiece{position: absolute; top :4px;z-index:1;} -.dropdown .dropdown-toggle.btn { - margin: .25rem .5rem .25rem 0; -} -.labelFilterPanel{ - display: flex; - position: relative; - -ms-flex-direction: column; - flex-direction: column; - background: #fff; - padding: .5rem 0; - border: 1px solid #ccc; - box-shadow: 0 1px 0.125rem hsla(0,0%,45%,.25); - min-width: 5rem; - max-width: 15rem; - border-radius: .125rem; -} -.labelBtn{ - position: relative; - overflow: hidden; - font-size: .58333rem; - letter-spacing: normal; - font-weight: 400; - background: transparent; - border: 0; - color: #565656; - cursor: pointer; - display: block; - margin: 0; - width: 100%; - height:30px; - text-transform: none;} -.labelBtn:hover{ - background-color: #eee; -} -.labelBtn:focus{ - outline: none; -} -.filterLabelHeader { - font-size: .5rem; - font-weight: 600; - letter-spacing: normal; - padding: 0 .5rem; - line-height: .75rem; - margin: 0; - color: #313131; -} -.labelFilterPanel .form-group input{position: relative; - margin-left: .5rem; - margin-right: .5rem;} - -.filterClose{position:absolute; right: 8px; top: 5px; cursor:pointer; font-size:20px;} -`; \ No newline at end of file diff --git a/src/ui_ng/lib/src/tag/tag.component.html.ts b/src/ui_ng/lib/src/tag/tag.component.html similarity index 99% rename from src/ui_ng/lib/src/tag/tag.component.html.ts rename to src/ui_ng/lib/src/tag/tag.component.html index 199c13624..fc08db94f 100644 --- a/src/ui_ng/lib/src/tag/tag.component.html.ts +++ b/src/ui_ng/lib/src/tag/tag.component.html @@ -1,4 +1,3 @@ -export const TAG_TEMPLATE = `

{{ manifestInfoTitle | translate }}

@@ -116,4 +115,4 @@ export const TAG_TEMPLATE = ` -`; + diff --git a/src/ui_ng/lib/src/tag/tag.component.scss b/src/ui_ng/lib/src/tag/tag.component.scss new file mode 100644 index 000000000..6136fe739 --- /dev/null +++ b/src/ui_ng/lib/src/tag/tag.component.scss @@ -0,0 +1,199 @@ +.option-right { + padding-right: 18px; + padding-bottom: 6px; +} + +.refresh-btn { + margin-top: 8px; + cursor: pointer; +} + +.refresh-btn:hover { + color: #007CBB; +} + +.sub-header-title { + margin: 12px 0; +} + +.embeded-datagrid { + width: 98%; + float: right; + /*add for issue #2688*/ +} + +.hidden-tag { + display: block; + height: 0; +} + +:host>>>.datagrid-placeholder { + display: none; +} + +.truncated { + display: inline-block; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.copy-failed { + color: red; + margin-right: 6px; +} + +:host>>>.datagrid clr-dg-column { + min-width: 80px; +} + +.rightPos { + position: absolute; + z-index: 100; + right: 35px; + margin-top: 4px; +} + +.btn-group .dropdown-menu clr-icon { + display: block; +} + +.dropdown-menu .dropdown-item { + position: relative; + padding-left: .5rem; + padding-right: .5rem; + line-height: 1.0 +} + +.dropdown-menu input { + position: relative; + margin-left: .5rem; + margin-right: .5rem; +} + +.pull-left { + display: inline-block; + float: left; +} + +.pull-right { + display: inline-block; + float: right; +} + +.btn-link { + display: inline-flex; + width: 15px; + min-width: 15px; + color: black; + vertical-align: super; +} + +.trigger-item, +.signpost-item { + display: inline; +} + +.signpost-content-body .label { + margin: .3rem; +} + +.labelDiv { + position: absolute; + left: 34px; + top: 5px; +} + +.datagrid-action-bar { + z-index: 10; +} + +.trigger-item hbr-label-piece { + display: flex !important; + margin: 6px 0; +} + +:host>>>.signpost-content { + min-width: 4rem; +} + +:host>>>.signpost-content-body { + padding: 0 .4rem; +} + +:host>>>.signpost-content-header { + display: none; +} + +.filterLabelPiece { + position: absolute; + top: 4px; + z-index: 1; +} + +.dropdown .dropdown-toggle.btn { + margin: .25rem .5rem .25rem 0; +} + +.labelFilterPanel { + display: flex; + position: relative; + -ms-flex-direction: column; + flex-direction: column; + background: #fff; + padding: .5rem 0; + border: 1px solid #ccc; + box-shadow: 0 1px 0.125rem hsla(0, 0%, 45%, .25); + min-width: 5rem; + max-width: 15rem; + border-radius: .125rem; +} + +.labelBtn { + position: relative; + overflow: hidden; + font-size: .58333rem; + letter-spacing: normal; + font-weight: 400; + background: transparent; + border: 0; + color: #565656; + cursor: pointer; + display: block; + margin: 0; + width: 100%; + height: 30px; + text-transform: none; +} + +.labelBtn:hover { + background-color: #eee; +} + +.labelBtn:focus { + outline: none; +} + +.filterLabelHeader { + font-size: .5rem; + font-weight: 600; + letter-spacing: normal; + padding: 0 .5rem; + line-height: .75rem; + margin: 0; + color: #313131; +} + +.labelFilterPanel .form-group input { + position: relative; + margin-left: .5rem; + margin-right: .5rem; +} + +.filterClose { + position: absolute; + right: 8px; + top: 5px; + cursor: pointer; + font-size: 20px; +} \ No newline at end of file diff --git a/src/ui_ng/lib/src/tag/tag.component.ts b/src/ui_ng/lib/src/tag/tag.component.ts index b8344d300..48f94d88f 100644 --- a/src/ui_ng/lib/src/tag/tag.component.ts +++ b/src/ui_ng/lib/src/tag/tag.component.ts @@ -38,9 +38,6 @@ import { ConfirmationAcknowledgement } from "../confirmation-dialog/confirmation import {Label, Tag, TagClickEvent} from "../service/interface"; -import { TAG_TEMPLATE } from "./tag.component.html"; -import { TAG_STYLE } from "./tag.component.css"; - import { toPromise, CustomComparator, @@ -67,9 +64,9 @@ export interface LabelState { } @Component({ - selector: "hbr-tag", - template: TAG_TEMPLATE, - styles: [TAG_STYLE], + selector: 'hbr-tag', + templateUrl: './tag.component.html', + styleUrls: ['./tag.component.scss'] }) export class TagComponent implements OnInit, AfterViewInit { diff --git a/src/ui_ng/lib/src/vulnerability-scanning/result-bar-chart-component.html b/src/ui_ng/lib/src/vulnerability-scanning/result-bar-chart-component.html new file mode 100644 index 000000000..8d27f3a68 --- /dev/null +++ b/src/ui_ng/lib/src/vulnerability-scanning/result-bar-chart-component.html @@ -0,0 +1,26 @@ +
+
+ {{'VULNERABILITY.STATE.STOPPED' | translate}} +
+
+ {{'VULNERABILITY.STATE.QUEUED' | translate}} +
+
+ + + {{'VULNERABILITY.STATE.ERROR' | translate}} + +
+
+
{{'VULNERABILITY.STATE.SCANNING' | translate}}
+
+
+
+ +
+
+ + {{'VULNERABILITY.STATE.UNKNOWN' | translate}} +
+ +
\ No newline at end of file diff --git a/src/ui_ng/lib/src/vulnerability-scanning/result-bar-chart.component.ts b/src/ui_ng/lib/src/vulnerability-scanning/result-bar-chart.component.ts index a48cc0825..87b043426 100644 --- a/src/ui_ng/lib/src/vulnerability-scanning/result-bar-chart.component.ts +++ b/src/ui_ng/lib/src/vulnerability-scanning/result-bar-chart.component.ts @@ -8,8 +8,6 @@ import { ViewChild } from '@angular/core'; -import { SCANNING_STYLES } from './scanning.css'; -import { BAR_CHART_COMPONENT_HTML } from './scanning.html'; import { VULNERABILITY_SCAN_STATUS } from '../utils'; import { VulnerabilitySummary, @@ -29,8 +27,8 @@ const RETRY_TIMES: number = 3; @Component({ selector: 'hbr-vulnerability-bar', - styles: [SCANNING_STYLES], - template: BAR_CHART_COMPONENT_HTML + templateUrl: './result-bar-chart-component.html', + styleUrls: ['./scanning.scss'] }) export class ResultBarChartComponent implements OnInit, OnDestroy { @Input() repoName: string = ""; diff --git a/src/ui_ng/lib/src/vulnerability-scanning/result-grid.component.html b/src/ui_ng/lib/src/vulnerability-scanning/result-grid.component.html new file mode 100644 index 000000000..58278dc1a --- /dev/null +++ b/src/ui_ng/lib/src/vulnerability-scanning/result-grid.component.html @@ -0,0 +1,51 @@ +
+
+
+
+ + +
+
+
+
+ + + + + {{'VULNERABILITY.GRID.COLUMN_ID' | translate}} + {{'VULNERABILITY.GRID.COLUMN_SEVERITY' | translate}} + {{'VULNERABILITY.GRID.COLUMN_PACKAGE' | translate}} + {{'VULNERABILITY.GRID.COLUMN_VERSION' | translate}} + {{'VULNERABILITY.GRID.COLUMN_FIXED' | translate}} + + {{'VULNERABILITY.GRID.PLACEHOLDER' | translate}} + + {{res.id}} + + {{severityText(res.severity) | translate}} + {{severityText(res.severity) | translate}} + {{severityText(res.severity) | translate}} + {{severityText(res.severity) | translate}} + {{severityText(res.severity) | translate}} + + {{res.package}} + {{res.version}} + +
+  {{res.fixedVersion}} +
+ {{res.fixedVersion}} + + + {{'VULNERABILITY.GRID.COLUMN_DESCRIPTION' | translate}}: {{res.description}} + + + + + {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'VULNERABILITY.GRID.FOOT_OF' | translate}} + {{pagination.totalItems}} {{'VULNERABILITY.GRID.FOOT_ITEMS' | translate}} + + + +
+
\ No newline at end of file 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 afd48c8a5..2fd81f049 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 @@ -7,14 +7,12 @@ import { import { ErrorHandler } from '../error-handler/index'; import { toPromise } from '../utils'; -import { GRID_COMPONENT_HTML } from './scanning.html'; -import { SCANNING_STYLES } from './scanning.css'; import {ChannelService} from "../channel/channel.service"; @Component({ selector: 'hbr-vulnerabilities-grid', - styles: [SCANNING_STYLES], - template: GRID_COMPONENT_HTML + templateUrl: './result-grid.component.html', + styleUrls: ['./scanning.scss'] }) export class ResultGridComponent implements OnInit { scanningResults: VulnerabilityItem[] = []; diff --git a/src/ui_ng/lib/src/vulnerability-scanning/result-tip.component.ts b/src/ui_ng/lib/src/vulnerability-scanning/result-tip.component.ts index 41e6d97d3..678c13d6e 100644 --- a/src/ui_ng/lib/src/vulnerability-scanning/result-tip.component.ts +++ b/src/ui_ng/lib/src/vulnerability-scanning/result-tip.component.ts @@ -2,8 +2,6 @@ import { Component, Input, OnInit } from '@angular/core'; import { VulnerabilitySummary, VulnerabilitySeverity } from '../service/index'; import { TranslateService } from '@ngx-translate/core'; -import { SCANNING_STYLES } from './scanning.css'; -import { TIP_COMPONENT_HTML } from './scanning.html'; import { VULNERABILITY_SCAN_STATUS } from '../utils'; export const MIN_TIP_WIDTH = 5; @@ -11,8 +9,8 @@ export const MAX_TIP_WIDTH = 100; @Component({ selector: 'hbr-vulnerability-summary-chart', - template: TIP_COMPONENT_HTML, - styles: [SCANNING_STYLES] + templateUrl: './result-tip.componnent.html', + styleUrls: ['./scanning.scss'] }) export class ResultTipComponent implements OnInit { _tipTitle: string = ""; diff --git a/src/ui_ng/lib/src/vulnerability-scanning/result-tip.componnent.html b/src/ui_ng/lib/src/vulnerability-scanning/result-tip.componnent.html new file mode 100644 index 000000000..4e46d8059 --- /dev/null +++ b/src/ui_ng/lib/src/vulnerability-scanning/result-tip.componnent.html @@ -0,0 +1,65 @@ +
+ +
+
+
+
+
+
+
+ +
+ + + {{'VULNERABILITY.OVERALL_SEVERITY' | translate }} {{'VULNERABILITY.SEVERITY.HIGH' | translate | titlecase }} + + + + {{'VULNERABILITY.OVERALL_SEVERITY' | translate }} {{'VULNERABILITY.SEVERITY.MEDIUM' | translate | titlecase}} + + + + {{'VULNERABILITY.OVERALL_SEVERITY' | translate }} {{'VULNERABILITY.SEVERITY.LOW' | translate | titlecase }} + + + + {{'VULNERABILITY.OVERALL_SEVERITY' | translate }} {{'VULNERABILITY.SEVERITY.UNKNOWN' | translate | titlecase }} + + + + {{'VULNERABILITY.NO_VULNERABILITY' | translate }} + +
+
+
+ {{tipTitle}} +
+
+
+ + {{highCount}}{{'VULNERABILITY.SEVERITY.HIGH' | translate }} +
+
+ + {{mediumCount}}{{'VULNERABILITY.SEVERITY.MEDIUM' | translate }} +
+
+ + {{lowCount}}{{'VULNERABILITY.SEVERITY.LOW' | translate }} +
+
+ + {{unknownCount}}{{'VULNERABILITY.SEVERITY.UNKNOWN' | translate }} +
+
+ + {{noneCount}}{{'VULNERABILITY.SEVERITY.NONE' | translate }} +
+
+
+ {{'VULNERABILITY.CHART.SCANNING_TIME' | translate}} + {{completeTimestamp | date:'MM/dd/y HH:mm:ss'}} +
+ + +
\ 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 deleted file mode 100644 index c77f391e4..000000000 --- a/src/ui_ng/lib/src/vulnerability-scanning/scanning.html.ts +++ /dev/null @@ -1,150 +0,0 @@ -export const TIP_COMPONENT_HTML: string = ` -
- -
-
-
-
-
-
-
- -
- - - {{'VULNERABILITY.OVERALL_SEVERITY' | translate }} {{'VULNERABILITY.SEVERITY.HIGH' | translate | titlecase }} - - - - {{'VULNERABILITY.OVERALL_SEVERITY' | translate }} {{'VULNERABILITY.SEVERITY.MEDIUM' | translate | titlecase}} - - - - {{'VULNERABILITY.OVERALL_SEVERITY' | translate }} {{'VULNERABILITY.SEVERITY.LOW' | translate | titlecase }} - - - - {{'VULNERABILITY.OVERALL_SEVERITY' | translate }} {{'VULNERABILITY.SEVERITY.UNKNOWN' | translate | titlecase }} - - - - {{'VULNERABILITY.NO_VULNERABILITY' | translate }} - -
-
-
- {{tipTitle}} -
-
-
- - {{highCount}}{{'VULNERABILITY.SEVERITY.HIGH' | translate }} -
-
- - {{mediumCount}}{{'VULNERABILITY.SEVERITY.MEDIUM' | translate }} -
-
- - {{lowCount}}{{'VULNERABILITY.SEVERITY.LOW' | translate }} -
-
- - {{unknownCount}}{{'VULNERABILITY.SEVERITY.UNKNOWN' | translate }} -
-
- - {{noneCount}}{{'VULNERABILITY.SEVERITY.NONE' | translate }} -
-
-
- {{'VULNERABILITY.CHART.SCANNING_TIME' | translate}} - {{completeTimestamp | date:'MM/dd/y HH:mm:ss'}} -
- - -
-`; - -export const GRID_COMPONENT_HTML: string = ` -
-
-
-
- - -
-
-
-
- - - - - {{'VULNERABILITY.GRID.COLUMN_ID' | translate}} - {{'VULNERABILITY.GRID.COLUMN_SEVERITY' | translate}} - {{'VULNERABILITY.GRID.COLUMN_PACKAGE' | translate}} - {{'VULNERABILITY.GRID.COLUMN_VERSION' | translate}} - {{'VULNERABILITY.GRID.COLUMN_FIXED' | translate}} - - {{'VULNERABILITY.GRID.PLACEHOLDER' | translate}} - - {{res.id}} - - {{severityText(res.severity) | translate}} - {{severityText(res.severity) | translate}} - {{severityText(res.severity) | translate}} - {{severityText(res.severity) | translate}} - {{severityText(res.severity) | translate}} - - {{res.package}} - {{res.version}} - -
-  {{res.fixedVersion}} -
- {{res.fixedVersion}} - - - {{'VULNERABILITY.GRID.COLUMN_DESCRIPTION' | translate}}: {{res.description}} - - - - - {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'VULNERABILITY.GRID.FOOT_OF' | translate}} - {{pagination.totalItems}} {{'VULNERABILITY.GRID.FOOT_ITEMS' | translate}} - - - -
-
-`; - -export const BAR_CHART_COMPONENT_HTML: string = ` -
-
- {{'VULNERABILITY.STATE.STOPPED' | translate}} -
-
- {{'VULNERABILITY.STATE.QUEUED' | translate}} -
-
- - - {{'VULNERABILITY.STATE.ERROR' | translate}} - -
-
-
{{'VULNERABILITY.STATE.SCANNING' | translate}}
-
-
-
- -
-
- - {{'VULNERABILITY.STATE.UNKNOWN' | translate}} -
- -
-`; \ No newline at end of file diff --git a/src/ui_ng/lib/src/vulnerability-scanning/scanning.css.ts b/src/ui_ng/lib/src/vulnerability-scanning/scanning.scss similarity index 97% rename from src/ui_ng/lib/src/vulnerability-scanning/scanning.css.ts rename to src/ui_ng/lib/src/vulnerability-scanning/scanning.scss index 3fbf38d80..cd5e6d5fd 100644 --- a/src/ui_ng/lib/src/vulnerability-scanning/scanning.css.ts +++ b/src/ui_ng/lib/src/vulnerability-scanning/scanning.scss @@ -1,4 +1,3 @@ -export const SCANNING_STYLES: string = ` .bar-wrapper { width: 120px; height: 12px; @@ -131,5 +130,4 @@ hr{ z-index: 100; right: 35px; margin-top: 4px; -} -`; \ No newline at end of file +} \ No newline at end of file diff --git a/src/ui_ng/package.json b/src/ui_ng/package.json index e95001a8e..457700d46 100644 --- a/src/ui_ng/package.json +++ b/src/ui_ng/package.json @@ -31,7 +31,7 @@ "clarity-icons": "^0.10.27", "clarity-ui": "^0.10.27", "core-js": "^2.4.1", - "harbor-ui": "0.7.18-dev.1", + "harbor-ui": "0.7.18-dev.6", "intl": "^1.2.5", "mutationobserver-shim": "^0.3.2", "ngx-cookie": "^1.0.0", diff --git a/src/ui_ng/src/app/account/account-settings/account-settings-modal.component.scss b/src/ui_ng/src/app/account/account-settings/account-settings-modal.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/ui_ng/src/app/account/account-settings/account-settings-modal.component.ts b/src/ui_ng/src/app/account/account-settings/account-settings-modal.component.ts index 4edd36b69..2bd43bbda 100644 --- a/src/ui_ng/src/app/account/account-settings/account-settings-modal.component.ts +++ b/src/ui_ng/src/app/account/account-settings/account-settings-modal.component.ts @@ -25,7 +25,7 @@ import { CommonRoutes } from "../../shared/shared.const"; @Component({ selector: "account-settings-modal", templateUrl: "account-settings-modal.component.html", - styleUrls: ["../../common.css"] + styleUrls: ["./account-settings-modal.component.scss", "../../common.scss"] }) export class AccountSettingsModalComponent implements OnInit, AfterViewChecked { diff --git a/src/ui_ng/src/app/account/account.module.ts b/src/ui_ng/src/app/account/account.module.ts index efbe02663..908398545 100644 --- a/src/ui_ng/src/app/account/account.module.ts +++ b/src/ui_ng/src/app/account/account.module.ts @@ -16,15 +16,15 @@ import { RouterModule } from '@angular/router'; import { CoreModule } from '../core/core.module'; import { SignInComponent } from './sign-in/sign-in.component'; -import { PasswordSettingComponent } from './password/password-setting.component'; +import { PasswordSettingComponent } from './password-setting/password-setting.component'; import { AccountSettingsModalComponent } from './account-settings/account-settings-modal.component'; import { SharedModule } from '../shared/shared.module'; import { SignUpComponent } from './sign-up/sign-up.component'; -import { ForgotPasswordComponent } from './password/forgot-password.component'; -import { ResetPasswordComponent } from './password/reset-password.component'; +import { ForgotPasswordComponent } from './password-setting/forgot-password/forgot-password.component'; +import { ResetPasswordComponent } from './password-setting/reset-password/reset-password.component'; import { SignUpPageComponent } from './sign-up/sign-up-page.component'; -import { PasswordSettingService } from './password/password-setting.service'; +import { PasswordSettingService } from './password-setting/password-setting.service'; import { RepositoryModule } from '../repository/repository.module'; @NgModule({ diff --git a/src/ui_ng/src/app/account/password/forgot-password.component.html b/src/ui_ng/src/app/account/password-setting/forgot-password/forgot-password.component.html similarity index 100% rename from src/ui_ng/src/app/account/password/forgot-password.component.html rename to src/ui_ng/src/app/account/password-setting/forgot-password/forgot-password.component.html diff --git a/src/ui_ng/src/app/account/password-setting/forgot-password/forgot-password.component.scss b/src/ui_ng/src/app/account/password-setting/forgot-password/forgot-password.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/ui_ng/src/app/account/password/forgot-password.component.ts b/src/ui_ng/src/app/account/password-setting/forgot-password/forgot-password.component.ts similarity index 91% rename from src/ui_ng/src/app/account/password/forgot-password.component.ts rename to src/ui_ng/src/app/account/password-setting/forgot-password/forgot-password.component.ts index 0b0c408ab..e2efca7dc 100644 --- a/src/ui_ng/src/app/account/password/forgot-password.component.ts +++ b/src/ui_ng/src/app/account/password-setting/forgot-password/forgot-password.component.ts @@ -15,13 +15,13 @@ import { Component, ViewChild } from '@angular/core'; import { Router } from '@angular/router'; import { NgForm } from '@angular/forms'; -import { PasswordSettingService } from './password-setting.service'; -import { InlineAlertComponent } from '../../shared/inline-alert/inline-alert.component'; +import { PasswordSettingService } from '../password-setting.service'; +import { InlineAlertComponent } from '../../../shared/inline-alert/inline-alert.component'; @Component({ selector: 'forgot-password', templateUrl: "forgot-password.component.html", - styleUrls: ['password.component.css', '../../common.css'] + styleUrls: ['./forgot-password.component.scss', '../password-setting.component.scss', '../../../common.scss'] }) export class ForgotPasswordComponent { opened: boolean = false; diff --git a/src/ui_ng/src/app/account/password/password-setting.component.html b/src/ui_ng/src/app/account/password-setting/password-setting.component.html similarity index 100% rename from src/ui_ng/src/app/account/password/password-setting.component.html rename to src/ui_ng/src/app/account/password-setting/password-setting.component.html diff --git a/src/ui_ng/src/app/account/password/password.component.css b/src/ui_ng/src/app/account/password-setting/password-setting.component.scss similarity index 100% rename from src/ui_ng/src/app/account/password/password.component.css rename to src/ui_ng/src/app/account/password-setting/password-setting.component.scss diff --git a/src/ui_ng/src/app/account/password/password-setting.component.ts b/src/ui_ng/src/app/account/password-setting/password-setting.component.ts similarity index 98% rename from src/ui_ng/src/app/account/password/password-setting.component.ts rename to src/ui_ng/src/app/account/password-setting/password-setting.component.ts index 846de87fa..e62d1b1c4 100644 --- a/src/ui_ng/src/app/account/password/password-setting.component.ts +++ b/src/ui_ng/src/app/account/password-setting/password-setting.component.ts @@ -24,7 +24,7 @@ import { MessageHandlerService } from '../../shared/message-handler/message-hand @Component({ selector: 'password-setting', templateUrl: "password-setting.component.html", - styleUrls: ['../../common.css'] + styleUrls: ['./password-setting.component.scss', '../../common.scss'] }) export class PasswordSettingComponent implements AfterViewChecked { opened: boolean = false; diff --git a/src/ui_ng/src/app/account/password/password-setting.service.ts b/src/ui_ng/src/app/account/password-setting/password-setting.service.ts similarity index 100% rename from src/ui_ng/src/app/account/password/password-setting.service.ts rename to src/ui_ng/src/app/account/password-setting/password-setting.service.ts diff --git a/src/ui_ng/src/app/account/password/password-setting.ts b/src/ui_ng/src/app/account/password-setting/password-setting.ts similarity index 100% rename from src/ui_ng/src/app/account/password/password-setting.ts rename to src/ui_ng/src/app/account/password-setting/password-setting.ts diff --git a/src/ui_ng/src/app/account/password/reset-password.component.html b/src/ui_ng/src/app/account/password-setting/reset-password/reset-password.component.html similarity index 100% rename from src/ui_ng/src/app/account/password/reset-password.component.html rename to src/ui_ng/src/app/account/password-setting/reset-password/reset-password.component.html diff --git a/src/ui_ng/src/app/account/password-setting/reset-password/reset-password.component.scss b/src/ui_ng/src/app/account/password-setting/reset-password/reset-password.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/ui_ng/src/app/account/password/reset-password.component.ts b/src/ui_ng/src/app/account/password-setting/reset-password/reset-password.component.ts similarity index 91% rename from src/ui_ng/src/app/account/password/reset-password.component.ts rename to src/ui_ng/src/app/account/password-setting/reset-password/reset-password.component.ts index 079050a82..90e23f1c1 100644 --- a/src/ui_ng/src/app/account/password/reset-password.component.ts +++ b/src/ui_ng/src/app/account/password-setting/reset-password/reset-password.component.ts @@ -15,15 +15,15 @@ import { Component, ViewChild, OnInit } from '@angular/core'; import { Router, ActivatedRoute } from '@angular/router'; import { NgForm } from '@angular/forms'; -import { PasswordSettingService } from './password-setting.service'; -import { InlineAlertComponent } from '../../shared/inline-alert/inline-alert.component'; -import { MessageHandlerService } from '../../shared/message-handler/message-handler.service'; -import { CommonRoutes } from '../../shared/shared.const'; +import { PasswordSettingService } from '../password-setting.service'; +import { InlineAlertComponent } from '../../../shared/inline-alert/inline-alert.component'; +import { MessageHandlerService } from '../../../shared/message-handler/message-handler.service'; +import { CommonRoutes } from '../../../shared/shared.const'; @Component({ selector: 'reset-password', templateUrl: "reset-password.component.html", - styleUrls: ['password.component.css', '../../common.css'] + styleUrls: ['./reset-password.component.scss', '../password-setting.component.scss', '../../../common.scss'] }) export class ResetPasswordComponent implements OnInit { opened: boolean = true; diff --git a/src/ui_ng/src/app/account/sign-in/sign-in.component.css b/src/ui_ng/src/app/account/sign-in/sign-in.component.scss similarity index 100% rename from src/ui_ng/src/app/account/sign-in/sign-in.component.css rename to src/ui_ng/src/app/account/sign-in/sign-in.component.scss diff --git a/src/ui_ng/src/app/account/sign-in/sign-in.component.ts b/src/ui_ng/src/app/account/sign-in/sign-in.component.ts index b9583a13f..fe6c40308 100644 --- a/src/ui_ng/src/app/account/sign-in/sign-in.component.ts +++ b/src/ui_ng/src/app/account/sign-in/sign-in.component.ts @@ -21,7 +21,7 @@ import { SignInCredential } from '../../shared/sign-in-credential'; import { SignUpComponent } from '../sign-up/sign-up.component'; import { CommonRoutes } from '../../shared/shared.const'; -import { ForgotPasswordComponent } from '../password/forgot-password.component'; +import { ForgotPasswordComponent } from '../password-setting/forgot-password/forgot-password.component'; import { AppConfigService } from '../../app-config.service'; import { AppConfig } from '../../app-config'; @@ -40,7 +40,7 @@ const expireDays = 10; @Component({ selector: 'sign-in', templateUrl: "sign-in.component.html", - styleUrls: ['sign-in.component.css'] + styleUrls: ['sign-in.component.scss'] }) export class SignInComponent implements AfterViewChecked, OnInit { diff --git a/src/ui_ng/src/app/base/global-search/global-search.component.ts b/src/ui_ng/src/app/base/global-search/global-search.component.ts index 7dc679921..56c4496e9 100644 --- a/src/ui_ng/src/app/base/global-search/global-search.component.ts +++ b/src/ui_ng/src/app/base/global-search/global-search.component.ts @@ -31,7 +31,7 @@ const deBounceTime = 500; //ms @Component({ selector: 'global-search', templateUrl: "global-search.component.html", - styleUrls: ["search.component.css"] + styleUrls: ["search.component.scss"] }) export class GlobalSearchComponent implements OnInit, OnDestroy { //Keep search term as Subject diff --git a/src/ui_ng/src/app/base/global-search/search-result.component.ts b/src/ui_ng/src/app/base/global-search/search-result.component.ts index 6ca1d97e3..ffb59cec4 100644 --- a/src/ui_ng/src/app/base/global-search/search-result.component.ts +++ b/src/ui_ng/src/app/base/global-search/search-result.component.ts @@ -24,7 +24,7 @@ import { MessageHandlerService } from '../../shared/message-handler/message-hand @Component({ selector: "search-result", templateUrl: "search-result.component.html", - styleUrls: ["search.component.css"], + styleUrls: ["search.component.scss"], providers: [GlobalSearchService] }) diff --git a/src/ui_ng/src/app/base/global-search/search.component.css b/src/ui_ng/src/app/base/global-search/search.component.scss similarity index 100% rename from src/ui_ng/src/app/base/global-search/search.component.css rename to src/ui_ng/src/app/base/global-search/search.component.scss diff --git a/src/ui_ng/src/app/base/harbor-shell/harbor-shell.component.css b/src/ui_ng/src/app/base/harbor-shell/harbor-shell.component.scss similarity index 100% rename from src/ui_ng/src/app/base/harbor-shell/harbor-shell.component.css rename to src/ui_ng/src/app/base/harbor-shell/harbor-shell.component.scss diff --git a/src/ui_ng/src/app/base/harbor-shell/harbor-shell.component.ts b/src/ui_ng/src/app/base/harbor-shell/harbor-shell.component.ts index 0db34ed73..8249e0279 100644 --- a/src/ui_ng/src/app/base/harbor-shell/harbor-shell.component.ts +++ b/src/ui_ng/src/app/base/harbor-shell/harbor-shell.component.ts @@ -18,7 +18,7 @@ import { ModalEvent } from '../modal-event'; import { modalEvents } from '../modal-events.const'; import { AccountSettingsModalComponent } from '../../account/account-settings/account-settings-modal.component'; -import { PasswordSettingComponent } from '../../account/password/password-setting.component'; +import { PasswordSettingComponent } from '../../account/password-setting/password-setting.component'; import { NavigatorComponent } from '../navigator/navigator.component'; import { SessionService } from '../../shared/session.service'; @@ -33,7 +33,7 @@ import { CommonRoutes } from '../../shared/shared.const'; @Component({ selector: 'harbor-shell', templateUrl: 'harbor-shell.component.html', - styleUrls: ["harbor-shell.component.css"] + styleUrls: ["harbor-shell.component.scss"] }) export class HarborShellComponent implements OnInit, OnDestroy { diff --git a/src/ui_ng/src/app/base/navigator/navigator.component.css b/src/ui_ng/src/app/base/navigator/navigator.component.scss similarity index 100% rename from src/ui_ng/src/app/base/navigator/navigator.component.css rename to src/ui_ng/src/app/base/navigator/navigator.component.scss diff --git a/src/ui_ng/src/app/base/navigator/navigator.component.ts b/src/ui_ng/src/app/base/navigator/navigator.component.ts index 31cc08db6..7a56ed938 100644 --- a/src/ui_ng/src/app/base/navigator/navigator.component.ts +++ b/src/ui_ng/src/app/base/navigator/navigator.component.ts @@ -31,7 +31,7 @@ import {SkinableConfig} from "../../skinable-config.service"; @Component({ selector: 'navigator', templateUrl: "navigator.component.html", - styleUrls: ["navigator.component.css"] + styleUrls: ["navigator.component.scss"] }) export class NavigatorComponent implements OnInit { diff --git a/src/ui_ng/src/app/base/start-page/start.component.css b/src/ui_ng/src/app/base/start-page/start.component.scss similarity index 100% rename from src/ui_ng/src/app/base/start-page/start.component.css rename to src/ui_ng/src/app/base/start-page/start.component.scss diff --git a/src/ui_ng/src/app/base/start-page/start.component.ts b/src/ui_ng/src/app/base/start-page/start.component.ts index 083dff8fc..d5e6e59c2 100644 --- a/src/ui_ng/src/app/base/start-page/start.component.ts +++ b/src/ui_ng/src/app/base/start-page/start.component.ts @@ -19,7 +19,7 @@ import { SessionUser } from '../../shared/session-user'; @Component({ selector: 'start-page', templateUrl: "start.component.html", - styleUrls: ['start.component.css'] + styleUrls: ['start.component.scss'] }) export class StartPageComponent implements OnInit{ isSessionValid: boolean = false; diff --git a/src/ui_ng/src/app/common.css b/src/ui_ng/src/app/common.scss similarity index 100% rename from src/ui_ng/src/app/common.css rename to src/ui_ng/src/app/common.scss diff --git a/src/ui_ng/src/app/config/auth/config-auth.component.scss b/src/ui_ng/src/app/config/auth/config-auth.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/ui_ng/src/app/config/auth/config-auth.component.ts b/src/ui_ng/src/app/config/auth/config-auth.component.ts index bba1d4ab5..9dd2fae55 100644 --- a/src/ui_ng/src/app/config/auth/config-auth.component.ts +++ b/src/ui_ng/src/app/config/auth/config-auth.component.ts @@ -20,7 +20,7 @@ import { Configuration } from 'harbor-ui'; @Component({ selector: 'config-auth', templateUrl: 'config-auth.component.html', - styleUrls: ['../config.component.css'] + styleUrls: ['./config-auth.component.scss', '../config.component.scss'] }) export class ConfigurationAuthComponent implements OnChanges { changeSub: Subscription; diff --git a/src/ui_ng/src/app/config/config.component.css b/src/ui_ng/src/app/config/config.component.scss similarity index 100% rename from src/ui_ng/src/app/config/config.component.css rename to src/ui_ng/src/app/config/config.component.scss diff --git a/src/ui_ng/src/app/config/config.component.ts b/src/ui_ng/src/app/config/config.component.ts index 87618c606..fa23279ac 100644 --- a/src/ui_ng/src/app/config/config.component.ts +++ b/src/ui_ng/src/app/config/config.component.ts @@ -45,7 +45,7 @@ const TabLinkContentMap = { @Component({ selector: 'config', templateUrl: 'config.component.html', - styleUrls: ['config.component.css'] + styleUrls: ['config.component.scss'] }) export class ConfigurationComponent implements OnInit, OnDestroy { onGoing = false; diff --git a/src/ui_ng/src/app/config/email/config-email.component.scss b/src/ui_ng/src/app/config/email/config-email.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/ui_ng/src/app/config/email/config-email.component.ts b/src/ui_ng/src/app/config/email/config-email.component.ts index 5f709fca3..67f403f24 100644 --- a/src/ui_ng/src/app/config/email/config-email.component.ts +++ b/src/ui_ng/src/app/config/email/config-email.component.ts @@ -19,7 +19,7 @@ import { Configuration } from 'harbor-ui'; @Component({ selector: 'config-email', templateUrl: "config-email.component.html", - styleUrls: ['../config.component.css'] + styleUrls: ['./config-email.component.scss', '../config.component.scss'] }) export class ConfigurationEmailComponent { @Input("mailConfig") currentConfig: Configuration = new Configuration(); diff --git a/src/ui_ng/src/app/global-message/message.component.css b/src/ui_ng/src/app/global-message/message.component.scss similarity index 100% rename from src/ui_ng/src/app/global-message/message.component.css rename to src/ui_ng/src/app/global-message/message.component.scss diff --git a/src/ui_ng/src/app/global-message/message.component.ts b/src/ui_ng/src/app/global-message/message.component.ts index 0d86ce234..e2b992443 100644 --- a/src/ui_ng/src/app/global-message/message.component.ts +++ b/src/ui_ng/src/app/global-message/message.component.ts @@ -24,7 +24,7 @@ import { AlertType, dismissInterval, httpStatusCode, CommonRoutes } from '../sha @Component({ selector: 'global-message', templateUrl: 'message.component.html', - styleUrls: ['message.component.css'] + styleUrls: ['message.component.scss'] }) export class MessageComponent implements OnInit, OnDestroy { diff --git a/src/ui_ng/src/app/harbor-routing.module.ts b/src/ui_ng/src/app/harbor-routing.module.ts index 6f42705dd..0571f2d4e 100644 --- a/src/ui_ng/src/app/harbor-routing.module.ts +++ b/src/ui_ng/src/app/harbor-routing.module.ts @@ -36,7 +36,7 @@ import { ProjectConfigComponent } from './project/project-config/project-config. import { ProjectRoutingResolver } from './project/project-routing-resolver.service'; import { SystemAdminGuard } from './shared/route/system-admin-activate.service'; import { SignUpComponent } from './account/sign-up/sign-up.component'; -import { ResetPasswordComponent } from './account/password/reset-password.component'; +import { ResetPasswordComponent } from './account/password-setting/reset-password/reset-password.component'; import { LogPageComponent } from './log/log-page.component'; import { ConfigurationComponent } from './config/config.component'; import { PageNotFoundComponent } from './shared/not-found/not-found.component' diff --git a/src/ui_ng/src/app/log/audit-log.component.css b/src/ui_ng/src/app/log/audit-log.component.scss similarity index 100% rename from src/ui_ng/src/app/log/audit-log.component.css rename to src/ui_ng/src/app/log/audit-log.component.scss diff --git a/src/ui_ng/src/app/log/audit-log.component.ts b/src/ui_ng/src/app/log/audit-log.component.ts index 537b065fd..0383b5572 100644 --- a/src/ui_ng/src/app/log/audit-log.component.ts +++ b/src/ui_ng/src/app/log/audit-log.component.ts @@ -46,7 +46,7 @@ class FilterOption { @Component({ selector: 'audit-log', templateUrl: './audit-log.component.html', - styleUrls: ['./audit-log.component.css'] + styleUrls: ['./audit-log.component.scss'] }) export class AuditLogComponent implements OnInit { diff --git a/src/ui_ng/src/app/project/create-project/create-project.component.ts b/src/ui_ng/src/app/project/create-project/create-project.component.ts index 1f4c3e6ce..8dc1f10ae 100644 --- a/src/ui_ng/src/app/project/create-project/create-project.component.ts +++ b/src/ui_ng/src/app/project/create-project/create-project.component.ts @@ -38,7 +38,7 @@ import "rxjs/add/operator/distinctUntilChanged"; @Component({ selector: "create-project", templateUrl: "create-project.component.html", - styleUrls: ["create-project.css"] + styleUrls: ["create-project.scss"] }) export class CreateProjectComponent implements AfterViewChecked, OnInit, OnDestroy { diff --git a/src/ui_ng/src/app/project/create-project/create-project.css b/src/ui_ng/src/app/project/create-project/create-project.scss similarity index 100% rename from src/ui_ng/src/app/project/create-project/create-project.css rename to src/ui_ng/src/app/project/create-project/create-project.scss diff --git a/src/ui_ng/src/app/project/member/add-member/add-member.component.css b/src/ui_ng/src/app/project/member/add-member/add-member.component.scss similarity index 100% rename from src/ui_ng/src/app/project/member/add-member/add-member.component.css rename to src/ui_ng/src/app/project/member/add-member/add-member.component.scss diff --git a/src/ui_ng/src/app/project/member/add-member/add-member.component.ts b/src/ui_ng/src/app/project/member/add-member/add-member.component.ts index 365c77cec..0adee0ef1 100644 --- a/src/ui_ng/src/app/project/member/add-member/add-member.component.ts +++ b/src/ui_ng/src/app/project/member/add-member/add-member.component.ts @@ -44,7 +44,7 @@ import {Project} from "../../project"; @Component({ selector: 'add-member', templateUrl: 'add-member.component.html', - styleUrls: ['add-member.component.css'], + styleUrls: ['add-member.component.scss'], providers: [UserService], changeDetection: ChangeDetectionStrategy.Default }) diff --git a/src/ui_ng/src/app/project/member/member.component.css b/src/ui_ng/src/app/project/member/member.component.scss similarity index 100% rename from src/ui_ng/src/app/project/member/member.component.css rename to src/ui_ng/src/app/project/member/member.component.scss diff --git a/src/ui_ng/src/app/project/member/member.component.ts b/src/ui_ng/src/app/project/member/member.component.ts index 1d24aaa97..9196b7c49 100644 --- a/src/ui_ng/src/app/project/member/member.component.ts +++ b/src/ui_ng/src/app/project/member/member.component.ts @@ -41,7 +41,7 @@ import {BatchInfo, BathInfoChanges} from "../../shared/confirmation-dialog/confi @Component({ templateUrl: "member.component.html", - styleUrls: ["./member.component.css"], + styleUrls: ["./member.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush }) export class MemberComponent implements OnInit, OnDestroy { diff --git a/src/ui_ng/src/app/project/project-config/project-config.component.scss b/src/ui_ng/src/app/project/project-config/project-config.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/ui_ng/src/app/project/project-config/project-config.component.ts b/src/ui_ng/src/app/project/project-config/project-config.component.ts index a62b220b6..6145bb848 100644 --- a/src/ui_ng/src/app/project/project-config/project-config.component.ts +++ b/src/ui_ng/src/app/project/project-config/project-config.component.ts @@ -20,7 +20,7 @@ import { Project } from '../project'; @Component({ selector: 'app-project-config', templateUrl: './project-config.component.html', - styleUrls: ['./project-config.component.css'] + styleUrls: ['./project-config.component.scss'] }) export class ProjectConfigComponent implements OnInit { diff --git a/src/ui_ng/src/app/project/project-detail/project-detail.component.css b/src/ui_ng/src/app/project/project-detail/project-detail.component.scss similarity index 100% rename from src/ui_ng/src/app/project/project-detail/project-detail.component.css rename to src/ui_ng/src/app/project/project-detail/project-detail.component.scss diff --git a/src/ui_ng/src/app/project/project-detail/project-detail.component.ts b/src/ui_ng/src/app/project/project-detail/project-detail.component.ts index ee19bac90..84e17d429 100644 --- a/src/ui_ng/src/app/project/project-detail/project-detail.component.ts +++ b/src/ui_ng/src/app/project/project-detail/project-detail.component.ts @@ -25,7 +25,7 @@ import {AppConfigService} from "../../app-config.service"; @Component({ selector: 'project-detail', templateUrl: 'project-detail.component.html', - styleUrls: [ 'project-detail.component.css' ] + styleUrls: [ 'project-detail.component.scss' ] }) export class ProjectDetailComponent { diff --git a/src/ui_ng/src/app/project/project-label/project-label.component.scss b/src/ui_ng/src/app/project/project-label/project-label.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/ui_ng/src/app/project/project-label/project-label.component.ts b/src/ui_ng/src/app/project/project-label/project-label.component.ts index c1857bd07..7fa1caa22 100644 --- a/src/ui_ng/src/app/project/project-label/project-label.component.ts +++ b/src/ui_ng/src/app/project/project-label/project-label.component.ts @@ -20,7 +20,7 @@ import { Project } from '../project'; @Component({ selector: 'app-project-config', templateUrl: './project-label.component.html', - styleUrls: ['./project-label.component.css'] + styleUrls: ['./project-label.component.scss'] }) export class ProjectLabelComponent implements OnInit { diff --git a/src/ui_ng/src/app/project/project.component.css b/src/ui_ng/src/app/project/project.component.scss similarity index 100% rename from src/ui_ng/src/app/project/project.component.css rename to src/ui_ng/src/app/project/project.component.scss diff --git a/src/ui_ng/src/app/project/project.component.ts b/src/ui_ng/src/app/project/project.component.ts index dbd8542c2..2690e24de 100644 --- a/src/ui_ng/src/app/project/project.component.ts +++ b/src/ui_ng/src/app/project/project.component.ts @@ -21,7 +21,7 @@ import { ProjectTypes } from '../shared/shared.const'; @Component({ selector: 'project', templateUrl: 'project.component.html', - styleUrls: ['./project.component.css'] + styleUrls: ['./project.component.scss'] }) export class ProjectComponent implements OnInit { projectTypes = ProjectTypes; diff --git a/src/ui_ng/src/app/replication/replication-management/replication-management.component.css b/src/ui_ng/src/app/replication/replication-management/replication-management.component.scss similarity index 100% rename from src/ui_ng/src/app/replication/replication-management/replication-management.component.css rename to src/ui_ng/src/app/replication/replication-management/replication-management.component.scss diff --git a/src/ui_ng/src/app/replication/replication-management/replication-management.component.ts b/src/ui_ng/src/app/replication/replication-management/replication-management.component.ts index 1996213d7..8cf0a3068 100644 --- a/src/ui_ng/src/app/replication/replication-management/replication-management.component.ts +++ b/src/ui_ng/src/app/replication/replication-management/replication-management.component.ts @@ -20,6 +20,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'replication-management', templateUrl: 'replication-management.component.html', - styleUrls: [ './replication-management.component.css' ] + styleUrls: [ './replication-management.component.scss' ] }) export class ReplicationManagementComponent {} \ No newline at end of file diff --git a/src/ui_ng/src/app/replication/total-replication/total-replication.component.css b/src/ui_ng/src/app/replication/total-replication/total-replication.component.scss similarity index 100% rename from src/ui_ng/src/app/replication/total-replication/total-replication.component.css rename to src/ui_ng/src/app/replication/total-replication/total-replication.component.scss diff --git a/src/ui_ng/src/app/repository/repository-page.component.ts b/src/ui_ng/src/app/repository/repository-page.component.ts index 8d6e6ce07..e7f54f555 100644 --- a/src/ui_ng/src/app/repository/repository-page.component.ts +++ b/src/ui_ng/src/app/repository/repository-page.component.ts @@ -52,4 +52,4 @@ export class RepositoryPageComponent implements OnInit { let linkUrl = ['harbor', 'projects', repoEvt.project_id, 'repositories', repoEvt.name]; this.router.navigate(linkUrl); } -}; +} diff --git a/src/ui_ng/src/app/repository/tag-repository/tag-repository.component.css b/src/ui_ng/src/app/repository/tag-repository/tag-repository.component.scss similarity index 100% rename from src/ui_ng/src/app/repository/tag-repository/tag-repository.component.css rename to src/ui_ng/src/app/repository/tag-repository/tag-repository.component.scss diff --git a/src/ui_ng/src/app/repository/tag-repository/tag-repository.component.ts b/src/ui_ng/src/app/repository/tag-repository/tag-repository.component.ts index e6e0ac086..ab9064ce9 100644 --- a/src/ui_ng/src/app/repository/tag-repository/tag-repository.component.ts +++ b/src/ui_ng/src/app/repository/tag-repository/tag-repository.component.ts @@ -24,7 +24,7 @@ import { Project } from '../../project/project'; @Component({ selector: 'tag-repository', templateUrl: 'tag-repository.component.html', - styleUrls: ['./tag-repository.component.css'] + styleUrls: ['./tag-repository.component.scss'] }) export class TagRepositoryComponent implements OnInit { diff --git a/src/ui_ng/src/app/repository/top-repo/top-repo.component.css b/src/ui_ng/src/app/repository/top-repo/top-repo.component.scss similarity index 100% rename from src/ui_ng/src/app/repository/top-repo/top-repo.component.css rename to src/ui_ng/src/app/repository/top-repo/top-repo.component.scss diff --git a/src/ui_ng/src/app/repository/top-repo/top-repo.component.ts b/src/ui_ng/src/app/repository/top-repo/top-repo.component.ts index 62652aa7f..364b20195 100644 --- a/src/ui_ng/src/app/repository/top-repo/top-repo.component.ts +++ b/src/ui_ng/src/app/repository/top-repo/top-repo.component.ts @@ -22,7 +22,7 @@ import { Repository } from 'harbor-ui'; @Component({ selector: 'top-repo', templateUrl: "top-repo.component.html", - styleUrls: ['top-repo.component.css'], + styleUrls: ['top-repo.component.scss'], providers: [TopRepoService] }) diff --git a/src/ui_ng/src/app/shared/about-dialog/about-dialog.component.css b/src/ui_ng/src/app/shared/about-dialog/about-dialog.component.scss similarity index 100% rename from src/ui_ng/src/app/shared/about-dialog/about-dialog.component.css rename to src/ui_ng/src/app/shared/about-dialog/about-dialog.component.scss diff --git a/src/ui_ng/src/app/shared/about-dialog/about-dialog.component.ts b/src/ui_ng/src/app/shared/about-dialog/about-dialog.component.ts index f598d6f4d..931408d7e 100644 --- a/src/ui_ng/src/app/shared/about-dialog/about-dialog.component.ts +++ b/src/ui_ng/src/app/shared/about-dialog/about-dialog.component.ts @@ -20,7 +20,7 @@ import {SkinableConfig} from "../../skinable-config.service"; @Component({ selector: 'about-dialog', templateUrl: "about-dialog.component.html", - styleUrls: ["about-dialog.component.css"] + styleUrls: ["about-dialog.component.scss"] }) export class AboutDialogComponent implements OnInit{ opened: boolean = false; diff --git a/src/ui_ng/src/app/shared/confirmation-dialog/confirmation-dialog.component.css b/src/ui_ng/src/app/shared/confirmation-dialog/confirmation-dialog.component.scss similarity index 100% rename from src/ui_ng/src/app/shared/confirmation-dialog/confirmation-dialog.component.css rename to src/ui_ng/src/app/shared/confirmation-dialog/confirmation-dialog.component.scss diff --git a/src/ui_ng/src/app/shared/confirmation-dialog/confirmation-dialog.component.ts b/src/ui_ng/src/app/shared/confirmation-dialog/confirmation-dialog.component.ts index 8969e8720..ff01940c8 100644 --- a/src/ui_ng/src/app/shared/confirmation-dialog/confirmation-dialog.component.ts +++ b/src/ui_ng/src/app/shared/confirmation-dialog/confirmation-dialog.component.ts @@ -24,7 +24,7 @@ import {BatchInfo} from "./confirmation-batch-message"; @Component({ selector: 'confiramtion-dialog', templateUrl: 'confirmation-dialog.component.html', - styleUrls: ['confirmation-dialog.component.css'] + styleUrls: ['confirmation-dialog.component.scss'] }) export class ConfirmationDialogComponent implements OnDestroy { diff --git a/src/ui_ng/src/app/shared/gauge/gauge.component.css b/src/ui_ng/src/app/shared/gauge/gauge.component.scss similarity index 100% rename from src/ui_ng/src/app/shared/gauge/gauge.component.css rename to src/ui_ng/src/app/shared/gauge/gauge.component.scss diff --git a/src/ui_ng/src/app/shared/gauge/gauge.component.ts b/src/ui_ng/src/app/shared/gauge/gauge.component.ts index b2b9b4845..37f5b4612 100644 --- a/src/ui_ng/src/app/shared/gauge/gauge.component.ts +++ b/src/ui_ng/src/app/shared/gauge/gauge.component.ts @@ -33,7 +33,7 @@ const RESOURCE_COLOR_GREY600: string = '#C7D1D6'; @Component({ selector: 'esxc-gauge', templateUrl: 'gauge.component.html', - styleUrls: ['gauge.component.css'] + styleUrls: ['gauge.component.scss'] }) export class GaugeComponent implements AfterViewInit { diff --git a/src/ui_ng/src/app/shared/inline-alert/inline-alert.component.css b/src/ui_ng/src/app/shared/inline-alert/inline-alert.component.scss similarity index 100% rename from src/ui_ng/src/app/shared/inline-alert/inline-alert.component.css rename to src/ui_ng/src/app/shared/inline-alert/inline-alert.component.scss diff --git a/src/ui_ng/src/app/shared/inline-alert/inline-alert.component.ts b/src/ui_ng/src/app/shared/inline-alert/inline-alert.component.ts index 7c0f43b34..12680e523 100644 --- a/src/ui_ng/src/app/shared/inline-alert/inline-alert.component.ts +++ b/src/ui_ng/src/app/shared/inline-alert/inline-alert.component.ts @@ -21,7 +21,7 @@ import { Subscription } from "rxjs"; @Component({ selector: 'inline-alert', templateUrl: "inline-alert.component.html", - styleUrls: ['inline-alert.component.css'] + styleUrls: ['inline-alert.component.scss'] }) export class InlineAlertComponent { inlineAlertType: string = 'alert-danger'; diff --git a/src/ui_ng/src/app/shared/new-user-form/new-user-form.component.css b/src/ui_ng/src/app/shared/new-user-form/new-user-form.component.scss similarity index 100% rename from src/ui_ng/src/app/shared/new-user-form/new-user-form.component.css rename to src/ui_ng/src/app/shared/new-user-form/new-user-form.component.scss diff --git a/src/ui_ng/src/app/shared/new-user-form/new-user-form.component.ts b/src/ui_ng/src/app/shared/new-user-form/new-user-form.component.ts index a1c2699bd..ef1962814 100644 --- a/src/ui_ng/src/app/shared/new-user-form/new-user-form.component.ts +++ b/src/ui_ng/src/app/shared/new-user-form/new-user-form.component.ts @@ -30,7 +30,7 @@ import { SessionService } from '../../shared/session.service'; @Component({ selector: 'new-user-form', templateUrl: 'new-user-form.component.html', - styleUrls: ['new-user-form.component.css', '../../common.css'] + styleUrls: ['./new-user-form.component.scss', '../../common.scss'] }) export class NewUserFormComponent implements AfterViewChecked, OnInit { diff --git a/src/ui_ng/src/app/shared/not-found/not-found.component.css b/src/ui_ng/src/app/shared/not-found/not-found.component.scss similarity index 100% rename from src/ui_ng/src/app/shared/not-found/not-found.component.css rename to src/ui_ng/src/app/shared/not-found/not-found.component.scss diff --git a/src/ui_ng/src/app/shared/not-found/not-found.component.ts b/src/ui_ng/src/app/shared/not-found/not-found.component.ts index ebe113d99..020bd1df1 100644 --- a/src/ui_ng/src/app/shared/not-found/not-found.component.ts +++ b/src/ui_ng/src/app/shared/not-found/not-found.component.ts @@ -20,7 +20,7 @@ const defaultLeftTime = 5; @Component({ selector: 'page-not-found', templateUrl: "not-found.component.html", - styleUrls: ['not-found.component.css'] + styleUrls: ['not-found.component.scss'] }) export class PageNotFoundComponent implements OnInit, OnDestroy{ leftSeconds: number = defaultLeftTime; diff --git a/src/ui_ng/src/app/shared/statictics/statistics-panel.component.ts b/src/ui_ng/src/app/shared/statictics/statistics-panel.component.ts index 5ac9324ff..fa9472e05 100644 --- a/src/ui_ng/src/app/shared/statictics/statistics-panel.component.ts +++ b/src/ui_ng/src/app/shared/statictics/statistics-panel.component.ts @@ -28,7 +28,7 @@ import { AppConfigService } from "./../../app-config.service"; @Component({ selector: "statistics-panel", templateUrl: "statistics-panel.component.html", - styleUrls: ["statistics.component.css"], + styleUrls: ["statistics.component.scss"], providers: [StatisticsService] }) diff --git a/src/ui_ng/src/app/shared/statictics/statistics.component.css b/src/ui_ng/src/app/shared/statictics/statistics.component.scss similarity index 100% rename from src/ui_ng/src/app/shared/statictics/statistics.component.css rename to src/ui_ng/src/app/shared/statictics/statistics.component.scss diff --git a/src/ui_ng/src/app/shared/statictics/statistics.component.ts b/src/ui_ng/src/app/shared/statictics/statistics.component.ts index 0510b418f..46365ceb7 100644 --- a/src/ui_ng/src/app/shared/statictics/statistics.component.ts +++ b/src/ui_ng/src/app/shared/statictics/statistics.component.ts @@ -16,7 +16,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'statistics', templateUrl: "statistics.component.html", - styleUrls: ['statistics.component.css'] + styleUrls: ['statistics.component.scss'] }) export class StatisticsComponent { diff --git a/src/ui_ng/src/app/user/user.component.css b/src/ui_ng/src/app/user/user.component.scss similarity index 100% rename from src/ui_ng/src/app/user/user.component.css rename to src/ui_ng/src/app/user/user.component.scss diff --git a/src/ui_ng/src/app/user/user.component.ts b/src/ui_ng/src/app/user/user.component.ts index 2197feb8b..8e853942b 100644 --- a/src/ui_ng/src/app/user/user.component.ts +++ b/src/ui_ng/src/app/user/user.component.ts @@ -41,7 +41,7 @@ import {BatchInfo, BathInfoChanges} from '../shared/confirmation-dialog/confirma @Component({ selector: 'harbor-user', templateUrl: 'user.component.html', - styleUrls: ['user.component.css'], + styleUrls: ['user.component.scss'], providers: [UserService], changeDetection: ChangeDetectionStrategy.OnPush }) diff --git a/src/ui_ng/src/styles.css b/src/ui_ng/src/styles.scss similarity index 100% rename from src/ui_ng/src/styles.css rename to src/ui_ng/src/styles.scss diff --git a/tests/resources/Harbor-Util.robot b/tests/resources/Harbor-Util.robot index 5a6495884..682e3a6f7 100644 --- a/tests/resources/Harbor-Util.robot +++ b/tests/resources/Harbor-Util.robot @@ -19,7 +19,7 @@ Library OperatingSystem *** Variables *** ${HARBOR_VERSION} v1.1.1 -${CLAIR_BUILDER} 1.4.0 +${CLAIR_BUILDER} 1.4.1 ${GOLANG_VERSION} 1.9.2 *** Keywords ***