From 282a63f57f596298b3753034ecd76e057d6d37a5 Mon Sep 17 00:00:00 2001 From: "Deng, Qian" Date: Tue, 8 May 2018 15:34:37 +0800 Subject: [PATCH] Fix legacy issues that html and css file are written on ts file. Currently, our html and css files are written as string on .ts file. This pr is to solve the legacy issue. --- .travis.yml | 4 +- make/dev/nodeclarity/entrypoint.sh | 2 +- src/ui_ng/angular-cli.json | 2 +- src/ui_ng/lib/package.json | 2 +- ...html.ts => registry-config.component.html} | 4 +- ....css.ts => registry-config.component.scss} | 4 +- .../src/config/registry-config.component.ts | 3 +- ...l.ts => replication-config.component.html} | 2 - .../replication-config.component.scss} | 0 .../replication-config.component.ts | 6 +- ...html.ts => system-settings.component.html} | 4 +- .../system/system-settings.component.scss} | 0 .../system/system-settings.component.ts | 6 +- ...ts => vulnerability-config.component.html} | 38 +- .../vulnerability-config.component.scss | 31 ++ .../vulnerability-config.component.ts | 7 +- .../confirmation-dialog.component.css.ts | 30 -- .../confirmation-dialog.component.html | 45 +++ .../confirmation-dialog.component.html.ts | 46 --- .../confirmation-dialog.component.scss | 57 +++ .../confirmation-dialog.component.ts | 6 +- ...ts => create-edit-endpoint.component.html} | 3 +- ...ts => create-edit-endpoint.component.scss} | 4 +- .../create-edit-endpoint.component.spec.ts | 10 +- .../create-edit-endpoint.component.ts | 7 +- .../create-edit-label.component.css.ts | 30 -- ...ml.ts => create-edit-label.component.html} | 3 +- .../create-edit-label.component.scss | 74 ++++ .../create-edit-label.component.ts | 8 +- .../create-edit-rule.component.css.ts | 70 ---- ...tml.ts => create-edit-rule.component.html} | 3 +- .../create-edit-rule.component.scss | 157 ++++++++ .../create-edit-rule.component.ts | 6 +- ...html.ts => datetime-picker.component.html} | 4 +- .../datetime-picker.component.ts | 4 +- .../src/endpoint/endpoint.component.css.ts | 21 -- ...ponent.html.ts => endpoint.component.html} | 4 +- .../lib/src/endpoint/endpoint.component.scss | 24 ++ .../lib/src/endpoint/endpoint.component.ts | 7 +- .../lib/src/filter/filter.component.html | 6 + .../lib/src/filter/filter.component.scss | 25 ++ src/ui_ng/lib/src/filter/filter.component.ts | 6 +- src/ui_ng/lib/src/filter/filter.template.ts | 39 -- ...onent.html.ts => grid-view.component.html} | 4 +- ...ponent.css.ts => grid-view.component.scss} | 15 +- .../lib/src/gridview/grid-view.component.ts | 6 +- src/ui_ng/lib/src/harbor-library.module.ts | 7 - src/ui_ng/lib/src/index.ts | 1 - ...nt.html.ts => inline-alert.component.html} | 4 +- ...ent.css.ts => inline-alert.component.scss} | 4 +- .../inline-alert/inline-alert.component.ts | 7 +- ...plate.ts => job-log-viewer.component.html} | 19 +- .../job-log-viewer.component.scss | 12 + .../job-log-viewer.component.ts | 5 +- .../label-piece/label-piece.component.html | 5 + .../label-piece/label-piece.component.scss | 17 + .../src/label-piece/label-piece.component.ts | 5 +- .../src/label-piece/label-piece.template.ts | 22 -- .../lib/src/label/label.component.css.ts | 21 -- ...component.html.ts => label.component.html} | 4 +- src/ui_ng/lib/src/label/label.component.scss | 24 ++ src/ui_ng/lib/src/label/label.component.ts | 6 +- .../list-replication-rule.component.css.ts | 2 - ...s => list-replication-rule.component.html} | 4 +- .../list-replication-rule.component.scss | 0 .../list-replication-rule.component.ts | 6 +- ....template.ts => recent-log.component.html} | 74 +--- .../lib/src/log/recent-log.component.scss | 55 +++ src/ui_ng/lib/src/log/recent-log.component.ts | 5 +- .../project-policy-config.component.css.ts | 9 - ...s => project-policy-config.component.html} | 3 +- .../project-policy-config.component.scss | 8 + .../project-policy-config.component.ts | 6 +- .../src/push-image/copy-input.component.ts | 6 +- ...input.html.ts => copy-input.coponent.html} | 4 +- ...mage.html.ts => push-image.component.html} | 4 +- .../src/push-image/push-image.component.ts | 6 +- .../{push-image.css.ts => push-image.scss} | 4 +- ...ent.html.ts => replication.component.html} | 3 +- ...nent.css.ts => replication.component.scss} | 3 +- .../src/replication/replication.component.ts | 7 +- ...css => repository-gridview.component.scss} | 0 .../repository-gridview.component.ts | 2 +- .../lib/src/repository-listview/index.ts | 6 - .../repository-listview.component.css.ts | 8 - .../repository-listview.component.html.ts | 41 -- .../repository-listview.component.spec.ts | 173 --------- .../repository-listview.component.ts | 354 ------------------ .../lib/src/repository-stackview/index.ts | 6 - .../repository-stackview.component.css.ts | 47 --- .../repository-stackview.component.html.ts | 42 --- .../repository-stackview.component.spec.ts | 224 ----------- .../repository-stackview.component.ts | 298 --------------- ...nent.html.ts => repository.component.html} | 4 +- ...onent.css.ts => repository.component.scss} | 5 +- .../repository/repository.component.spec.ts | 6 +- .../src/repository/repository.component.ts | 7 +- ...nent.html.ts => tag-detail.component.html} | 4 +- ...onent.css.ts => tag-detail.component.scss} | 5 +- src/ui_ng/lib/src/tag/tag-detail.component.ts | 7 +- src/ui_ng/lib/src/tag/tag.component.css.ts | 121 ------ ...g.component.html.ts => tag.component.html} | 3 +- src/ui_ng/lib/src/tag/tag.component.scss | 199 ++++++++++ src/ui_ng/lib/src/tag/tag.component.ts | 9 +- .../result-bar-chart-component.html | 26 ++ .../result-bar-chart.component.ts | 6 +- .../result-grid.component.html | 51 +++ .../result-grid.component.ts | 6 +- .../result-tip.component.ts | 6 +- .../result-tip.componnent.html | 65 ++++ .../vulnerability-scanning/scanning.html.ts | 150 -------- .../{scanning.css.ts => scanning.scss} | 4 +- src/ui_ng/package.json | 2 +- .../account-settings-modal.component.scss | 0 .../account-settings-modal.component.ts | 2 +- src/ui_ng/src/app/account/account.module.ts | 8 +- .../forgot-password.component.html | 0 .../forgot-password.component.scss | 0 .../forgot-password.component.ts | 6 +- .../password-setting.component.html | 0 .../password-setting.component.scss} | 0 .../password-setting.component.ts | 2 +- .../password-setting.service.ts | 0 .../password-setting.ts | 0 .../reset-password.component.html | 0 .../reset-password.component.scss | 0 .../reset-password.component.ts | 10 +- ...n.component.css => sign-in.component.scss} | 0 .../app/account/sign-in/sign-in.component.ts | 4 +- .../global-search/global-search.component.ts | 2 +- .../global-search/search-result.component.ts | 2 +- ...ch.component.css => search.component.scss} | 0 ...ponent.css => harbor-shell.component.scss} | 0 .../harbor-shell/harbor-shell.component.ts | 4 +- ...component.css => navigator.component.scss} | 0 .../app/base/navigator/navigator.component.ts | 2 +- ...art.component.css => start.component.scss} | 0 .../app/base/start-page/start.component.ts | 2 +- src/ui_ng/src/app/{common.css => common.scss} | 0 .../config/auth/config-auth.component.scss | 0 .../app/config/auth/config-auth.component.ts | 2 +- ...ig.component.css => config.component.scss} | 0 src/ui_ng/src/app/config/config.component.ts | 2 +- .../config/email/config-email.component.scss | 0 .../config/email/config-email.component.ts | 2 +- ...e.component.css => message.component.scss} | 0 .../app/global-message/message.component.ts | 2 +- src/ui_ng/src/app/harbor-routing.module.ts | 2 +- ...component.css => audit-log.component.scss} | 0 src/ui_ng/src/app/log/audit-log.component.ts | 2 +- .../create-project.component.ts | 2 +- ...create-project.css => create-project.scss} | 0 ...omponent.css => add-member.component.scss} | 0 .../member/add-member/add-member.component.ts | 2 +- ...er.component.css => member.component.scss} | 0 .../app/project/member/member.component.ts | 2 +- .../project-config.component.scss | 0 .../project-config.component.ts | 2 +- ...nent.css => project-detail.component.scss} | 0 .../project-detail.component.ts | 2 +- .../project-label.component.scss | 0 .../project-label/project-label.component.ts | 2 +- ...t.component.css => project.component.scss} | 0 .../src/app/project/project.component.ts | 2 +- ... => replication-management.component.scss} | 0 .../replication-management.component.ts | 2 +- ...t.css => total-replication.component.scss} | 0 .../repository/repository-page.component.ts | 2 +- ...nent.css => tag-repository.component.scss} | 0 .../tag-repository.component.ts | 2 +- ....component.css => top-repo.component.scss} | 0 .../repository/top-repo/top-repo.component.ts | 2 +- ...ponent.css => about-dialog.component.scss} | 0 .../about-dialog/about-dialog.component.ts | 2 +- ...css => confirmation-dialog.component.scss} | 0 .../confirmation-dialog.component.ts | 2 +- ...uge.component.css => gauge.component.scss} | 0 .../src/app/shared/gauge/gauge.component.ts | 2 +- ...ponent.css => inline-alert.component.scss} | 0 .../inline-alert/inline-alert.component.ts | 2 +- ...onent.css => new-user-form.component.scss} | 0 .../new-user-form/new-user-form.component.ts | 2 +- ...component.css => not-found.component.scss} | 0 .../shared/not-found/not-found.component.ts | 2 +- .../statictics/statistics-panel.component.ts | 2 +- ...omponent.css => statistics.component.scss} | 0 .../shared/statictics/statistics.component.ts | 2 +- ...user.component.css => user.component.scss} | 0 src/ui_ng/src/app/user/user.component.ts | 2 +- src/ui_ng/src/{styles.css => styles.scss} | 0 tests/resources/Harbor-Util.robot | 2 +- 191 files changed, 1041 insertions(+), 2155 deletions(-) rename src/ui_ng/lib/src/config/{registry-config.component.html.ts => registry-config.component.html} (93%) rename src/ui_ng/lib/src/config/{registry-config.component.css.ts => registry-config.component.scss} (61%) rename src/ui_ng/lib/src/config/replication/{replication-config.component.html.ts => replication-config.component.html} (94%) rename src/ui_ng/{src/app/project/project-config/project-config.component.css => lib/src/config/replication/replication-config.component.scss} (100%) rename src/ui_ng/lib/src/config/system/{system-settings.component.html.ts => system-settings.component.html} (97%) rename src/ui_ng/{src/app/project/project-label/project-label.component.css => lib/src/config/system/system-settings.component.scss} (100%) rename src/ui_ng/lib/src/config/vulnerability/{vulnerability-config.component.template.ts => vulnerability-config.component.html} (84%) create mode 100644 src/ui_ng/lib/src/config/vulnerability/vulnerability-config.component.scss delete mode 100644 src/ui_ng/lib/src/confirmation-dialog/confirmation-dialog.component.css.ts create mode 100644 src/ui_ng/lib/src/confirmation-dialog/confirmation-dialog.component.html delete mode 100644 src/ui_ng/lib/src/confirmation-dialog/confirmation-dialog.component.html.ts create mode 100644 src/ui_ng/lib/src/confirmation-dialog/confirmation-dialog.component.scss rename src/ui_ng/lib/src/create-edit-endpoint/{create-edit-endpoint.component.html.ts => create-edit-endpoint.component.html} (98%) rename src/ui_ng/lib/src/create-edit-endpoint/{create-edit-endpoint.component.css.ts => create-edit-endpoint.component.scss} (72%) delete mode 100644 src/ui_ng/lib/src/create-edit-label/create-edit-label.component.css.ts rename src/ui_ng/lib/src/create-edit-label/{create-edit-label.component.html.ts => create-edit-label.component.html} (97%) create mode 100644 src/ui_ng/lib/src/create-edit-label/create-edit-label.component.scss delete mode 100644 src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.css.ts rename src/ui_ng/lib/src/create-edit-rule/{create-edit-rule.component.html.ts => create-edit-rule.component.html} (99%) create mode 100644 src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.scss rename src/ui_ng/lib/src/datetime-picker/{datetime-picker.component.html.ts => datetime-picker.component.html} (87%) delete mode 100644 src/ui_ng/lib/src/endpoint/endpoint.component.css.ts rename src/ui_ng/lib/src/endpoint/{endpoint.component.html.ts => endpoint.component.html} (98%) create mode 100644 src/ui_ng/lib/src/endpoint/endpoint.component.scss create mode 100644 src/ui_ng/lib/src/filter/filter.component.html create mode 100644 src/ui_ng/lib/src/filter/filter.component.scss delete mode 100644 src/ui_ng/lib/src/filter/filter.template.ts rename src/ui_ng/lib/src/gridview/{grid-view.component.html.ts => grid-view.component.html} (94%) rename src/ui_ng/lib/src/gridview/{grid-view.component.css.ts => grid-view.component.scss} (70%) rename src/ui_ng/lib/src/inline-alert/{inline-alert.component.html.ts => inline-alert.component.html} (91%) rename src/ui_ng/lib/src/inline-alert/{inline-alert.component.css.ts => inline-alert.component.scss} (83%) rename src/ui_ng/lib/src/job-log-viewer/{job-log-viewer.component.template.ts => job-log-viewer.component.html} (65%) create mode 100644 src/ui_ng/lib/src/job-log-viewer/job-log-viewer.component.scss create mode 100644 src/ui_ng/lib/src/label-piece/label-piece.component.html create mode 100644 src/ui_ng/lib/src/label-piece/label-piece.component.scss delete mode 100644 src/ui_ng/lib/src/label-piece/label-piece.template.ts delete mode 100644 src/ui_ng/lib/src/label/label.component.css.ts rename src/ui_ng/lib/src/label/{label.component.html.ts => label.component.html} (98%) create mode 100644 src/ui_ng/lib/src/label/label.component.scss delete mode 100644 src/ui_ng/lib/src/list-replication-rule/list-replication-rule.component.css.ts rename src/ui_ng/lib/src/list-replication-rule/{list-replication-rule.component.html.ts => list-replication-rule.component.html} (98%) create mode 100644 src/ui_ng/lib/src/list-replication-rule/list-replication-rule.component.scss rename src/ui_ng/lib/src/log/{recent-log.template.ts => recent-log.component.html} (59%) create mode 100644 src/ui_ng/lib/src/log/recent-log.component.scss delete mode 100644 src/ui_ng/lib/src/project-policy-config/project-policy-config.component.css.ts rename src/ui_ng/lib/src/project-policy-config/{project-policy-config.component.html.ts => project-policy-config.component.html} (98%) create mode 100644 src/ui_ng/lib/src/project-policy-config/project-policy-config.component.scss rename src/ui_ng/lib/src/push-image/{copy-input.html.ts => copy-input.coponent.html} (94%) rename src/ui_ng/lib/src/push-image/{push-image.html.ts => push-image.component.html} (97%) rename src/ui_ng/lib/src/push-image/{push-image.css.ts => push-image.scss} (93%) rename src/ui_ng/lib/src/replication/{replication.component.html.ts => replication.component.html} (99%) rename src/ui_ng/lib/src/replication/{replication.component.css.ts => replication.component.scss} (89%) rename src/ui_ng/lib/src/repository-gridview/{repository-gridview.component.css => repository-gridview.component.scss} (100%) delete mode 100644 src/ui_ng/lib/src/repository-listview/index.ts delete mode 100644 src/ui_ng/lib/src/repository-listview/repository-listview.component.css.ts delete mode 100644 src/ui_ng/lib/src/repository-listview/repository-listview.component.html.ts delete mode 100644 src/ui_ng/lib/src/repository-listview/repository-listview.component.spec.ts delete mode 100644 src/ui_ng/lib/src/repository-listview/repository-listview.component.ts delete mode 100644 src/ui_ng/lib/src/repository-stackview/index.ts delete mode 100644 src/ui_ng/lib/src/repository-stackview/repository-stackview.component.css.ts delete mode 100644 src/ui_ng/lib/src/repository-stackview/repository-stackview.component.html.ts delete mode 100644 src/ui_ng/lib/src/repository-stackview/repository-stackview.component.spec.ts delete mode 100644 src/ui_ng/lib/src/repository-stackview/repository-stackview.component.ts rename src/ui_ng/lib/src/repository/{repository.component.html.ts => repository.component.html} (98%) rename src/ui_ng/lib/src/repository/{repository.component.css.ts => repository.component.scss} (93%) rename src/ui_ng/lib/src/tag/{tag-detail.component.html.ts => tag-detail.component.html} (98%) rename src/ui_ng/lib/src/tag/{tag-detail.component.css.ts => tag-detail.component.scss} (97%) delete mode 100644 src/ui_ng/lib/src/tag/tag.component.css.ts rename src/ui_ng/lib/src/tag/{tag.component.html.ts => tag.component.html} (99%) create mode 100644 src/ui_ng/lib/src/tag/tag.component.scss create mode 100644 src/ui_ng/lib/src/vulnerability-scanning/result-bar-chart-component.html create mode 100644 src/ui_ng/lib/src/vulnerability-scanning/result-grid.component.html create mode 100644 src/ui_ng/lib/src/vulnerability-scanning/result-tip.componnent.html delete mode 100644 src/ui_ng/lib/src/vulnerability-scanning/scanning.html.ts rename src/ui_ng/lib/src/vulnerability-scanning/{scanning.css.ts => scanning.scss} (97%) create mode 100644 src/ui_ng/src/app/account/account-settings/account-settings-modal.component.scss rename src/ui_ng/src/app/account/{password => password-setting/forgot-password}/forgot-password.component.html (100%) create mode 100644 src/ui_ng/src/app/account/password-setting/forgot-password/forgot-password.component.scss rename src/ui_ng/src/app/account/{password => password-setting/forgot-password}/forgot-password.component.ts (91%) rename src/ui_ng/src/app/account/{password => password-setting}/password-setting.component.html (100%) rename src/ui_ng/src/app/account/{password/password.component.css => password-setting/password-setting.component.scss} (100%) rename src/ui_ng/src/app/account/{password => password-setting}/password-setting.component.ts (98%) rename src/ui_ng/src/app/account/{password => password-setting}/password-setting.service.ts (100%) rename src/ui_ng/src/app/account/{password => password-setting}/password-setting.ts (100%) rename src/ui_ng/src/app/account/{password => password-setting/reset-password}/reset-password.component.html (100%) create mode 100644 src/ui_ng/src/app/account/password-setting/reset-password/reset-password.component.scss rename src/ui_ng/src/app/account/{password => password-setting/reset-password}/reset-password.component.ts (91%) rename src/ui_ng/src/app/account/sign-in/{sign-in.component.css => sign-in.component.scss} (100%) rename src/ui_ng/src/app/base/global-search/{search.component.css => search.component.scss} (100%) rename src/ui_ng/src/app/base/harbor-shell/{harbor-shell.component.css => harbor-shell.component.scss} (100%) rename src/ui_ng/src/app/base/navigator/{navigator.component.css => navigator.component.scss} (100%) rename src/ui_ng/src/app/base/start-page/{start.component.css => start.component.scss} (100%) rename src/ui_ng/src/app/{common.css => common.scss} (100%) create mode 100644 src/ui_ng/src/app/config/auth/config-auth.component.scss rename src/ui_ng/src/app/config/{config.component.css => config.component.scss} (100%) create mode 100644 src/ui_ng/src/app/config/email/config-email.component.scss rename src/ui_ng/src/app/global-message/{message.component.css => message.component.scss} (100%) rename src/ui_ng/src/app/log/{audit-log.component.css => audit-log.component.scss} (100%) rename src/ui_ng/src/app/project/create-project/{create-project.css => create-project.scss} (100%) rename src/ui_ng/src/app/project/member/add-member/{add-member.component.css => add-member.component.scss} (100%) rename src/ui_ng/src/app/project/member/{member.component.css => member.component.scss} (100%) create mode 100644 src/ui_ng/src/app/project/project-config/project-config.component.scss rename src/ui_ng/src/app/project/project-detail/{project-detail.component.css => project-detail.component.scss} (100%) create mode 100644 src/ui_ng/src/app/project/project-label/project-label.component.scss rename src/ui_ng/src/app/project/{project.component.css => project.component.scss} (100%) rename src/ui_ng/src/app/replication/replication-management/{replication-management.component.css => replication-management.component.scss} (100%) rename src/ui_ng/src/app/replication/total-replication/{total-replication.component.css => total-replication.component.scss} (100%) rename src/ui_ng/src/app/repository/tag-repository/{tag-repository.component.css => tag-repository.component.scss} (100%) rename src/ui_ng/src/app/repository/top-repo/{top-repo.component.css => top-repo.component.scss} (100%) rename src/ui_ng/src/app/shared/about-dialog/{about-dialog.component.css => about-dialog.component.scss} (100%) rename src/ui_ng/src/app/shared/confirmation-dialog/{confirmation-dialog.component.css => confirmation-dialog.component.scss} (100%) rename src/ui_ng/src/app/shared/gauge/{gauge.component.css => gauge.component.scss} (100%) rename src/ui_ng/src/app/shared/inline-alert/{inline-alert.component.css => inline-alert.component.scss} (100%) rename src/ui_ng/src/app/shared/new-user-form/{new-user-form.component.css => new-user-form.component.scss} (100%) rename src/ui_ng/src/app/shared/not-found/{not-found.component.css => not-found.component.scss} (100%) rename src/ui_ng/src/app/shared/statictics/{statistics.component.css => statistics.component.scss} (100%) rename src/ui_ng/src/app/user/{user.component.css => user.component.scss} (100%) rename src/ui_ng/src/{styles.css => styles.scss} (100%) diff --git a/.travis.yml b/.travis.yml index 0796aabe055..3cd6084e5a6 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 bec32011daf..b4899bb6d5a 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 87732b1deed..93021a4b16c 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 5ba94ae84aa..33844872806 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 804a81bc317..7bc33ef2fb0 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 @@
- -`; \ 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 130a7a58d00..dfed30a8cd6 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 b790883f526..30ddf4139d7 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 52b081f6cad..f3f7d31b7e8 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 @@
-`; \ 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 911264ff42d..5d8bd96f676 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 5905f398e86..d45ad29e58b 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 @@
-
-`; \ 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 c315d633eb4..4d1dc61ee55 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 57e53d36fd1..22966e33c9f 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_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 00000000000..e9f4fd65b53 --- /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 43036aa0bb0..41f89c51702 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 ce4251e8a6b..00000000000 --- 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 00000000000..678f61b912b --- /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 50e884c9b6b..00000000000 --- 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 00000000000..d16a336f9e0 --- /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 6f03044f148..054b3260cc2 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 55c9305749c..4bc0760f9cc 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 @@

{{modalTitle}}

-`; \ 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 00671afec25..44e0b0fc4bd 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 17f9e2fe464..59bb2d26c06 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 de2e4130275..fe391e74ece 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 07498e0de5a..00000000000 --- 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 f72223660b9..4ea4764e1a5 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 @@
-
`; \ 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 00000000000..8433cbacbbf --- /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 3527484167b..860a2c389df 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 b842ce255a2..00000000000 --- 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 7cb7c4134d1..f2a9ea3cf4a 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 @@

{{headerTitle | translate}}

-`; + 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 00000000000..312944e8c7d --- /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 827bf5a4b38..92e4a05bbe0 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 90c35c59001..ea01d856803 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 7eb061849ce..a00b6d1d401 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 79b57b43a8f..00000000000 --- 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 f3ee43daedd..01bdb05c675 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 @@
-
-`; \ 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 00000000000..ad95ff77531 --- /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 53dd65343ec..67e59803fa9 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 00000000000..00b18dcf85c --- /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 00000000000..e9957d32c85 --- /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 bba258ade64..b61134b8d32 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 005850d16f5..00000000000 --- 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 fdc9937aa39..4ecb8269ec4 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 e97f73bf30e..fe8eca86266 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 d34f08f9411..a4bb3c1c7f5 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 cae236599a8..a37bc09b1aa 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 d626cf436ed..00d6cfd83c9 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 2a07c335917..668e5392dbb 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 @@
- -`; \ 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 68fe7c857ab..9855e2d0768 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 dc62f41fea2..86e51c1cac6 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 93588cf1994..b28701b76ca 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 @@

{{titl
- -`; - -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 00000000000..a2308f75a71 --- /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 4786a1e791e..e7bafefa692 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 00000000000..863ab163638 --- /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 00000000000..3a5e468daca --- /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 d00234eafd5..99561d5b309 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 b8ec01490f8..00000000000 --- 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 707434c3fc1..00000000000 --- 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 fd58e9398e2..dc13ef4ae54 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 @@
-
-`; \ 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 00000000000..ad95ff77531 --- /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 6cb1727c378..23bcdd51f97 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 67157fd6c55..00000000000 --- 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 20ca5fded3e..c3ca177b16a 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 @@ -
-`; \ 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 00000000000..e69de29bb2d 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 4c73ba74f8a..d1a74e7d7ec 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 0d478af8546..20533815f24 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 @@

{{'SIDE_NAV.LOGS' | translate}}{{"AUDIT_LOG.OPERATION" | translate | lowercase}}

- + - - + +
@@ -39,64 +35,10 @@

{{'SIDE_NAV.LOGS' | translate}}{{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 00000000000..76d3cf595b2 --- /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 4c511585268..6ddf0396a8e 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 b48779761b2..00000000000 --- 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 04b17f327d9..ecf8fd7db12 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 @@
-
`; + \ 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 00000000000..af708456466 --- /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 5694cd021e8..2b6e0f2360a 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 1ce7f3b73f4..9f22f91b907 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 4006358b43b..7778abc5c65 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 @@
-
-`; + \ 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 = `
- -`; \ 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 ab776ebc912..bba227cb47f 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 ce9ac53ad3c..84444506cec 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 880c8e12c71..bbe1e249e89 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 @@
{{' -
`; \ 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}} - - - -
-
- -
-`; \ 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 614efc261f8..00000000000 --- 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 6440c9f0547..00000000000 --- 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 601a30a5c3b..00000000000 --- 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 fe00810428e..00000000000 --- 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 004cecef71c..00000000000 --- 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 c5805203284..00000000000 --- 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 1ec92911d98..00000000000 --- 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 82cf1921efa..82a4ed39295 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 @@

{{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 = `

{{ manifestInfoTitle | translate }}

@@ -116,4 +115,4 @@

{{ manifestInfoTitle | translate }}

-`; + 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 00000000000..6136fe739bc --- /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 b8344d300c2..48f94d88f79 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 00000000000..8d27f3a68d7 --- /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 a48cc082549..87b0434267a 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 00000000000..58278dc1a41 --- /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 afd48c8a538..2fd81f04937 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 41e6d97d37b..678c13d6e71 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 00000000000..4e46d80591e --- /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 c77f391e44b..00000000000 --- 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 3fbf38d804c..cd5e6d5fd6f 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 e95001a8ed8..457700d463f 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 00000000000..e69de29bb2d 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 4edd36b69f5..2bd43bbdaa6 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 efbe0266376..908398545af 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 00000000000..e69de29bb2d 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 0b0c408abdf..e2efca7dc0a 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 846de87fa45..e62d1b1c45a 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 00000000000..e69de29bb2d 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 079050a8278..90e23f1c16b 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 b9583a13f8f..fe6c4030802 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 7dc679921c7..56c4496e929 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 6ca1d97e315..ffb59cec4cd 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 0db34ed73a0..8249e027907 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 31cc08db66f..7a56ed93852 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 083dff8fc2c..d5e6e59c2b8 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 00000000000..e69de29bb2d 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 bba1d4ab56d..9dd2fae555c 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 87618c6065a..fa23279acb8 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 00000000000..e69de29bb2d 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 5f709fca370..67f403f2460 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 0d86ce2340f..e2b99244342 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 6f42705ddb5..0571f2d4e0e 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 537b065fd14..0383b557226 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 1f4c3e6ce84..8dc1f10ae1a 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 365c77cec5c..0adee0ef163 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 1d24aaa97a5..9196b7c4964 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 00000000000..e69de29bb2d 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 a62b220b63a..6145bb84848 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 ee19bac90f3..84e17d42954 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 00000000000..e69de29bb2d 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 c1857bd076e..7fa1caa2243 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 dbd8542c26c..2690e24ded1 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 1996213d7cf..8cf0a30689c 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 8d6e6ce07c2..e7f54f555a3 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 e6e0ac086f9..ab9064ce95f 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 62652aa7f42..364b2019583 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 f598d6f4d9c..931408d7ea0 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 8969e872033..ff01940c862 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 b2b9b484567..37f5b461219 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 7c0f43b345f..12680e52357 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 a1c2699bd65..ef1962814fb 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 ebe113d995d..020bd1df19a 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 5ac9324ff9c..fa9472e059f 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 0510b418f30..46365ceb73b 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 2197feb8be6..8e853942bd4 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 5a649588465..682e3a6f739 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 ***