\ 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 36f32cb524e..18cbcc853b1 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 = `
@@ -75,4 +74,4 @@
{{'
-
`;
\ 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 aa73d9af3dc..409a7f5297b 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 0bbc832db5d..c08eb35f6a4 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 248d4a25ebb..939f3119080 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 651511113ec..00000000000
--- 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 04111f7feca..00000000000
--- 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 2d7cf8b9e27..00000000000
--- 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}}
-
-
-
-
-
-
-
-
-
-
-
- {{'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}}
-
-
-
-
-
-
-
@@ -50,5 +49,4 @@
{{repoName}}
-
-`;
\ 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 d8678959195..089b89a65ad 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 cabf45c49da..f7c50664449 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 beb1cf0dd0c..bc5988430a2 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 450cbb93eed..1ae3782c35f 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 @@
{{repositoryId}}:{{tagDetails.name}}
-
-`;
\ 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 ca6e1e3606f..1d6e71751bd 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 5de4438317f..8512b4ac45c 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 7e5c8ceca4f..00000000000
--- 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 199c13624dc..fc08db94f63 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 = `