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

{{dialogTitle}}

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

{{dialogTitle}}

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

{{modalTitle}}

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

{{headerTitle | translate}}

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

{{title | translate }}

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

{{'SIDE_NAV.LOGS' | translate}}

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

{{ manifestInfoTitle | translate }}

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