Update UI packages (#18312)

1. Update Angular packages to 15.2.1 2. Update swagger-ui to 4.17.1 3. Update Clarity to 15.0.1 and remove datepickerToggle property Signed-off-by: AllForNothing <sshijun@vmware.com>
2024-06-23 13:25:02 +02:00 · 2023-03-17 12:14:16 +08:00 · 2023-03-17 12:14:16 +08:00 · 321d8a0885
commit 321d8a0885
parent 4f8225cc13
52 changed files with 5665 additions and 16075 deletions
--- a/src/portal/PACKAGE.md
+++ b/src/portal/PACKAGE.md
@ -47,24 +47,24 @@
  "private": true,
  "dependencies": {
     // Angular framework. Required
-    "@angular/animations": "^15.0.4",
-    "@angular/common": "^15.0.4",
-    "@angular/compiler": "^15.0.4,
-    "@angular/core": "^15.0.4",
-    "@angular/forms": "^15.0.4",
-    "@angular/localize": "^15.0.4",
-    "@angular/platform-browser": "^15.0.4",
-    "@angular/platform-browser-dynamic": "^15.0.4",
-    "@angular/router": "^15.0.4",
+    "@angular/animations": "^15.2.1",
+    "@angular/common": "^15.2.1",
+    "@angular/compiler": "^15.2.1,
+    "@angular/core": "^15.2.1",
+    "@angular/forms": "^15.2.1",
+    "@angular/localize": "^15.2.1",
+    "@angular/platform-browser": "^15.2.1",
+    "@angular/platform-browser-dynamic": "^15.2.1",
+    "@angular/router": "^15.2.1",
    "rxjs": "^7.4.0",
    "tslib": "^2.2.0",
    "zone.js": "~0.11.4",

    // Clarity UI. Required
-    "@clr/angular": "15.0.0-beta.3",
+    "@clr/angular": "15.0.1",
    "@cds/core": "6.2.3",
    "@clr/icons": "13.0.2",
-    "@clr/ui": "15.0.0-beta.3",
+    "@clr/ui": "15.0.1",

    // For Harbor i18n functionality. Required
    "@ngx-translate/core": "^14.0.0",
@ -80,16 +80,16 @@
    "ngx-cookie": "^5.0.2",

    // To render markdown data. Required
-    "ngx-markdown": "~13.0.0",
+    "ngx-markdown": "~15.1.1",

    // To convert yaml to json. Required
    "js-yaml": "^4.1.0"
  },
  "devDependencies": {
    // Angular framework. Required
-    "@angular-devkit/build-angular": "^15.0.4",
-    "@angular/cli": "^15.0.4",
-    "@angular/compiler-cli": "^15.0.4",
+    "@angular-devkit/build-angular": "^15.2.1",
+    "@angular/cli": "^15.2.1",
+    "@angular/compiler-cli": "^15.2.1",
    "@types/jasmine": "~4.3.0",
    "@types/node": "^16.11.6",
    "typescript": "~4.8.2",
--- a/src/portal/app-swagger-ui/package-lock.json
+++ b/src/portal/app-swagger-ui/package-lock.json
--- a/src/portal/app-swagger-ui/package.json
+++ b/src/portal/app-swagger-ui/package.json
@ -9,7 +9,7 @@
  "dependencies": {
    "css-loader": "^6.7.1",
    "style-loader": "^3.3.1",
-    "swagger-ui": "4.13.2"
+    "swagger-ui": "4.17.1"
  },
  "devDependencies": {
    "clean-webpack-plugin": "^4.0.0",
--- a/src/portal/package-lock.json
+++ b/src/portal/package-lock.json
--- a/src/portal/package.json
+++ b/src/portal/package.json
@ -28,39 +28,39 @@
  },
  "private": true,
  "dependencies": {
-    "@angular/animations": "^15.0.4",
-    "@angular/common": "^15.0.4",
-    "@angular/compiler": "^15.0.4",
-    "@angular/core": "^15.0.4",
-    "@angular/forms": "^15.0.4",
-    "@angular/localize": "^15.0.4",
-    "@angular/platform-browser": "^15.0.4",
-    "@angular/platform-browser-dynamic": "^15.0.4",
-    "@angular/router": "^15.0.4",
+    "@angular/animations": "^15.2.1",
+    "@angular/common": "^15.2.1",
+    "@angular/compiler": "^15.2.1",
+    "@angular/core": "^15.2.1",
+    "@angular/forms": "^15.2.1",
+    "@angular/localize": "^15.2.1",
+    "@angular/platform-browser": "^15.2.1",
+    "@angular/platform-browser-dynamic": "^15.2.1",
+    "@angular/router": "^15.2.1",
    "@cds/core": "6.2.3",
-    "@clr/angular": "15.0.0-beta.3",
+    "@clr/angular": "15.0.1",
    "@clr/icons": "13.0.2",
-    "@clr/ui": "15.0.0-beta.3",
+    "@clr/ui": "15.0.1",
    "@ngx-translate/core": "^14.0.0",
    "@ngx-translate/http-loader": "^7.0.0",
    "cron-validator": "^1.3.1",
    "js-yaml": "^4.1.0",
    "ngx-clipboard": "^15.1.0",
    "ngx-cookie": "^6.0.1",
-    "ngx-markdown": "15.0.0",
+    "ngx-markdown": "15.1.1",
    "rxjs": "^7.4.0",
    "tslib": "^2.2.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
-    "@angular-devkit/build-angular": "^15.0.4",
+    "@angular-devkit/build-angular": "^15.2.1",
    "@angular-eslint/builder": "15.1.0",
    "@angular-eslint/eslint-plugin": "15.1.0",
    "@angular-eslint/eslint-plugin-template": "15.1.0",
    "@angular-eslint/schematics": "15.1.0",
    "@angular-eslint/template-parser": "15.1.0",
-    "@angular/cli": "^15.0.4",
-    "@angular/compiler-cli": "^15.0.4",
+    "@angular/cli": "^15.2.1",
+    "@angular/compiler-cli": "^15.2.1",
    "@types/express": "^4.17.12",
    "@types/jasmine": "~4.3.1",
    "@types/node": "^16.11.6",
--- a/src/portal/src/app/base/left-side-nav/clearing-job/audit-log-purge/history/purge-history.component.html
+++ b/src/portal/src/app/base/left-side-nav/clearing-job/audit-log-purge/history/purge-history.component.html
@ -50,10 +50,10 @@
            job.job_status.toUpperCase() | translate
        }}</clr-dg-cell>
        <clr-dg-cell>{{
-            job.creation_time | harborDatetime: 'medium'
+            job.creation_time | harborDatetime : 'medium'
        }}</clr-dg-cell>
        <clr-dg-cell>{{
-            job.update_time | harborDatetime: 'medium'
+            job.update_time | harborDatetime : 'medium'
        }}</clr-dg-cell>
        <clr-dg-cell>
            <a
--- a/src/portal/src/app/base/left-side-nav/clearing-job/gc-page/gc/gc-history/gc-history.component.html
+++ b/src/portal/src/app/base/left-side-nav/clearing-job/gc-page/gc/gc-history/gc-history.component.html
@ -49,10 +49,10 @@
            job.job_status.toUpperCase() | translate
        }}</clr-dg-cell>
        <clr-dg-cell>{{
-            job.creation_time | harborDatetime: 'medium'
+            job.creation_time | harborDatetime : 'medium'
        }}</clr-dg-cell>
        <clr-dg-cell>{{
-            job.update_time | harborDatetime: 'medium'
+            job.update_time | harborDatetime : 'medium'
        }}</clr-dg-cell>
        <clr-dg-cell>
            <a
--- a/src/portal/src/app/base/left-side-nav/distribution/distribution-instances/distribution-instances.component.html
+++ b/src/portal/src/app/base/left-side-nav/distribution/distribution-instances/distribution-instances.component.html
@ -238,7 +238,7 @@
                    <clr-dg-cell>{{ instance.auth_mode }}</clr-dg-cell>
                    <clr-dg-cell>{{
                        fmtTime(instance.setup_timestamp)
-                            | harborDatetime: 'short'
+                            | harborDatetime : 'short'
                    }}</clr-dg-cell>
                    <clr-dg-cell>{{ instance.description }}</clr-dg-cell>
                </clr-dg-row>
--- a/src/portal/src/app/base/left-side-nav/log/recent-log.component.html
+++ b/src/portal/src/app/base/left-side-nav/log/recent-log.component.html
@ -68,7 +68,7 @@
                <clr-dg-cell>{{ l.resource_type }}</clr-dg-cell>
                <clr-dg-cell>{{ l.operation }}</clr-dg-cell>
                <clr-dg-cell>{{
-                    l.op_time | harborDatetime: 'short'
+                    l.op_time | harborDatetime : 'short'
                }}</clr-dg-cell>
            </clr-dg-row>
            <clr-dg-footer>
--- a/src/portal/src/app/base/left-side-nav/projects/list-project/list-project.component.html
+++ b/src/portal/src/app/base/left-side-nav/projects/list-project/list-project.component.html
@ -81,7 +81,7 @@
        }}</clr-dg-cell>
        <clr-dg-cell>{{ p.repo_count }}</clr-dg-cell>
        <clr-dg-cell>{{
-            p.creation_time | harborDatetime: 'short'
+            p.creation_time | harborDatetime : 'short'
        }}</clr-dg-cell>
    </clr-dg-row>
    <clr-dg-footer>
--- a/src/portal/src/app/base/left-side-nav/registries/endpoint.component.html
+++ b/src/portal/src/app/base/left-side-nav/registries/endpoint.component.html
@ -109,7 +109,7 @@
                    </clr-dg-cell>
                    <clr-dg-cell>{{ t.credential.type }}</clr-dg-cell>
                    <clr-dg-cell>{{
-                        t.creation_time | harborDatetime: 'short'
+                        t.creation_time | harborDatetime : 'short'
                    }}</clr-dg-cell>
                    <clr-dg-cell>{{ t.description }}</clr-dg-cell>
                </clr-dg-row>
--- a/src/portal/src/app/base/left-side-nav/replication/replication/replication-tasks/replication-tasks.component.html
+++ b/src/portal/src/app/base/left-side-nav/replication/replication/replication-tasks/replication-tasks.component.html
@ -67,7 +67,7 @@
                    <label
                        >{{ 'REPLICATION.CREATION_TIME' | translate }} :</label
                    >
-                    <span>{{ startTime | harborDatetime: 'short' }}</span>
+                    <span>{{ startTime | harborDatetime : 'short' }}</span>
                </div>
            </div>
            <div class="flex-block">
@ -177,10 +177,10 @@
                <clr-dg-cell>{{ t.operation }}</clr-dg-cell>
                <clr-dg-cell>{{ getStatusStr(t.status) }}</clr-dg-cell>
                <clr-dg-cell>{{
-                    t.start_time | harborDatetime: 'short'
+                    t.start_time | harborDatetime : 'short'
                }}</clr-dg-cell>
                <clr-dg-cell>{{
-                    t.end_time | harborDatetime: 'short'
+                    t.end_time | harborDatetime : 'short'
                }}</clr-dg-cell>
                <clr-dg-cell>
                    <a
--- a/src/portal/src/app/base/left-side-nav/replication/replication/replication.component.html
+++ b/src/portal/src/app/base/left-side-nav/replication/replication/replication.component.html
@ -155,7 +155,7 @@
                    </clr-dg-cell>
                    <clr-dg-cell>{{ j.trigger }}</clr-dg-cell>
                    <clr-dg-cell>{{
-                        j.start_time | harborDatetime: 'short'
+                        j.start_time | harborDatetime : 'short'
                    }}</clr-dg-cell>
                    <clr-dg-cell>{{ getDuration(j) }}</clr-dg-cell>
                    <clr-dg-cell>
--- a/src/portal/src/app/base/left-side-nav/system-robot-accounts/list-all-projects/list-all-projects.component.html
+++ b/src/portal/src/app/base/left-side-nav/system-robot-accounts/list-all-projects/list-all-projects.component.html
@ -76,7 +76,7 @@
            }}</a>
        </clr-dg-cell>
        <clr-dg-cell>{{
-            p.creation_time | harborDatetime: 'short'
+            p.creation_time | harborDatetime : 'short'
        }}</clr-dg-cell>
        <clr-dg-cell>
            <div class="permissions">
--- a/src/portal/src/app/base/left-side-nav/system-robot-accounts/new-robot/new-robot.component.html
+++ b/src/portal/src/app/base/left-side-nav/system-robot-accounts/new-robot/new-robot.component.html
@ -210,7 +210,7 @@
                                >:
                                <span>{{
                                    calculateExpiresAt()
-                                        | harborDatetime: 'short'
+                                        | harborDatetime : 'short'
                                }}</span>
                            </span>
                        </clr-control-helper>
--- a/src/portal/src/app/base/left-side-nav/system-robot-accounts/projects-modal/projects-modal.component.html
+++ b/src/portal/src/app/base/left-side-nav/system-robot-accounts/projects-modal/projects-modal.component.html
@ -54,7 +54,7 @@
                    </div>
                </clr-dg-cell>
                <clr-dg-cell>{{
-                    getProject(p)?.creation_time | harborDatetime: 'short'
+                    getProject(p)?.creation_time | harborDatetime : 'short'
                }}</clr-dg-cell>
            </clr-dg-row>
            <clr-dg-footer>
--- a/src/portal/src/app/base/left-side-nav/system-robot-accounts/system-robot-accounts.component.html
+++ b/src/portal/src/app/base/left-side-nav/system-robot-accounts/system-robot-accounts.component.html
@ -213,7 +213,7 @@
                    </span>
                </clr-dg-cell>
                <clr-dg-cell>{{
-                    r.creation_time | harborDatetime: 'short'
+                    r.creation_time | harborDatetime : 'short'
                }}</clr-dg-cell>
                <clr-dg-cell
                    ><app-remaining-time
--- a/src/portal/src/app/base/left-side-nav/user/user.component.html
+++ b/src/portal/src/app/base/left-side-nav/user/user.component.html
@ -112,7 +112,7 @@
                    <clr-dg-cell>{{ isSystemAdmin(user) }}</clr-dg-cell>
                    <clr-dg-cell>{{ user.email }}</clr-dg-cell>
                    <clr-dg-cell>{{
-                        user.creation_time | harborDatetime: 'short'
+                        user.creation_time | harborDatetime : 'short'
                    }}</clr-dg-cell>
                </clr-dg-row>
                <clr-dg-footer>
--- a/src/portal/src/app/base/project/p2p-provider/policy/policy.component.html
+++ b/src/portal/src/app/base/project/p2p-provider/policy/policy.component.html
@ -285,7 +285,7 @@
                </clr-signpost>
            </clr-dg-cell>
            <clr-dg-cell>{{
-                p.creation_time | harborDatetime: 'short'
+                p.creation_time | harborDatetime : 'short'
            }}</clr-dg-cell>
            <clr-dg-cell>{{ p.description }}</clr-dg-cell>
        </clr-dg-row>
@ -411,7 +411,7 @@
                getTriggerTypeI18nForExecution(execution.trigger) | translate
            }}</clr-dg-cell>
            <clr-dg-cell>{{
-                execution.start_time | harborDatetime: 'short'
+                execution.start_time | harborDatetime : 'short'
            }}</clr-dg-cell>
            <clr-dg-cell>{{ getDuration(execution) }}</clr-dg-cell>
            <clr-dg-cell>{{
--- a/src/portal/src/app/base/project/p2p-provider/task-list/task-list.component.html
+++ b/src/portal/src/app/base/project/p2p-provider/task-list/task-list.component.html
@ -68,7 +68,7 @@
                    <label
                        >{{ 'REPLICATION.CREATION_TIME' | translate }} :</label
                    >
-                    <span>{{ startTime() | harborDatetime: 'short' }}</span>
+                    <span>{{ startTime() | harborDatetime : 'short' }}</span>
                </div>
            </div>
            <div class="flex-block">
@ -207,7 +207,7 @@
                </clr-dg-cell>

                <clr-dg-cell>{{
-                    t.start_time | harborDatetime: 'short'
+                    t.start_time | harborDatetime : 'short'
                }}</clr-dg-cell>
                <clr-dg-cell>{{ getDuration(t) }}</clr-dg-cell>
                <clr-dg-cell>
--- a/src/portal/src/app/base/project/project-log/audit-log.component.html
+++ b/src/portal/src/app/base/project/project-log/audit-log.component.html
@ -78,7 +78,7 @@
                <clr-dg-cell>{{ l.resource_type }}</clr-dg-cell>
                <clr-dg-cell>{{ l.operation }}</clr-dg-cell>
                <clr-dg-cell>{{
-                    l.op_time | harborDatetime: 'short'
+                    l.op_time | harborDatetime : 'short'
                }}</clr-dg-cell>
            </clr-dg-row>
            <clr-dg-footer>
--- a/src/portal/src/app/base/project/repository/artifact/artifact-additions/artifact-vulnerabilities/artifact-vulnerabilities.component.html
+++ b/src/portal/src/app/base/project/repository/artifact/artifact-additions/artifact-vulnerabilities/artifact-vulnerabilities.component.html
@ -186,7 +186,7 @@
                <div class="report">
                    <i *ngIf="scanner">{{
                        'VULNERABILITY.REPORTED_BY'
-                            | translate: { scanner: getScannerInfo(scanner) }
+                            | translate : { scanner: getScannerInfo(scanner) }
                    }}</i>
                </div>
                <clr-dg-pagination
--- a/src/portal/src/app/base/project/repository/artifact/artifact-additions/build-history/build-history.component.html
+++ b/src/portal/src/app/base/project/repository/artifact/artifact-additions/build-history/build-history.component.html
@ -7,7 +7,7 @@
        *clrDgItems="let h of historyList"
        [clrDgItem]="h"
        class="history-item">
-        <clr-dg-cell>{{ h.created | harborDatetime: 'short' }}</clr-dg-cell>
+        <clr-dg-cell>{{ h.created | harborDatetime : 'short' }}</clr-dg-cell>
        <clr-dg-cell>{{ h.created_by }}</clr-dg-cell>
    </clr-dg-row>
    <clr-dg-footer>{{ historyList.length }} commands</clr-dg-footer>
--- a/src/portal/src/app/base/project/repository/artifact/artifact-additions/values/values.component.html
+++ b/src/portal/src/app/base/project/repository/artifact/artifact-additions/values/values.component.html
@ -49,7 +49,7 @@
    <div class="col-xs-8" *ngIf="!valueMode">
        <div
            class="yaml-container"
-            [innerHTML]="values | language: 'yaml' | markdown"></div>
+            [innerHTML]="values | language : 'yaml' | markdown"></div>
    </div>
 </div>
 <div *ngIf="loading" class="clr-row mt-1 center">
--- a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list-page.component.html
+++ b/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list-page.component.html
@ -10,7 +10,7 @@
        <span *ngIf="referArtifactNameArray?.length >= 1">
            <span *ngFor="let digest of referArtifactNameArray; let i = index">
                &lt;<a (click)="jumpDigest(i)">{{
-                    digest | slice: 0:15
+                    digest | slice : 0 : 15
                }}</a></span
            >
        </span>
@ -22,7 +22,7 @@
                    {{ repoName }}
                </h2>
                <h2 sub-header-title class="custom-h2" *ngIf="artifactDigest">
-                    {{ artifactDigest | slice: 0:15 }}
+                    {{ artifactDigest | slice : 0 : 15 }}
                </h2>
            </div>
        </div>
--- a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.html
+++ b/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.html
@ -235,7 +235,7 @@
                            class="digest margin-left-5"
                            (click)="goIntoArtifactSummaryPage(artifact)"
                            title="{{ artifact.digest }}">
-                            {{ artifact.digest | slice: 0:15 }}</a
+                            {{ artifact.digest | slice : 0 : 15 }}</a
                        >
                        <clr-tooltip
                            *ngIf="
@ -529,7 +529,7 @@
                </clr-dg-cell>
                <clr-dg-cell>
                    <div class="cell">
-                        {{ artifact.push_time | harborDatetime: 'short' }}
+                        {{ artifact.push_time | harborDatetime : 'short' }}
                    </div>
                </clr-dg-cell>
                <clr-dg-cell>
@ -537,7 +537,8 @@
                        {{
                            artifact.pull_time === availableTime
                                ? ''
-                                : (artifact.pull_time | harborDatetime: 'short')
+                                : (artifact.pull_time
+                                  | harborDatetime : 'short')
                        }}
                    </div>
                </clr-dg-cell>
--- a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/sub-accessories/sub-accessories.component.html
+++ b/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/sub-accessories/sub-accessories.component.html
@ -52,7 +52,7 @@
        </clr-dg-cell>
        <clr-dg-cell>
            <div class="cell">
-                {{ a.creation_time | harborDatetime: 'short' }}
+                {{ a.creation_time | harborDatetime : 'short' }}
            </div>
        </clr-dg-cell>
    </clr-dg-row>
--- a/src/portal/src/app/base/project/repository/artifact/artifact-summary.component.html
+++ b/src/portal/src/app/base/project/repository/artifact/artifact-summary.component.html
@ -11,7 +11,7 @@
    <span
        class="back-icon"
        *ngFor="let digest of referArtifactNameArray; let i = index">
-        &lt;<a (click)="jumpDigest(i)">{{ digest | slice: 0:15 }}</a></span
+        &lt;<a (click)="jumpDigest(i)">{{ digest | slice : 0 : 15 }}</a></span
    >
 </div>

@ -29,7 +29,7 @@
                    (error)="showDefaultIcon($event)" />
            </div>
            <span class="margin-left-10px">{{
-                artifact?.digest | slice: 0:15
+                artifact?.digest | slice : 0 : 15
            }}</span>
            <clr-icon
                size="25"
--- a/src/portal/src/app/base/project/repository/artifact/artifact-tag/artifact-tag.component.html
+++ b/src/portal/src/app/base/project/repository/artifact/artifact-tag/artifact-tag.component.html
@ -168,10 +168,12 @@
        </clr-dg-cell>
        <clr-dg-cell>{{
            tag.pull_time !== availableTime
-                ? (tag.pull_time | harborDatetime: 'short')
+                ? (tag.pull_time | harborDatetime : 'short')
                : ''
        }}</clr-dg-cell>
-        <clr-dg-cell>{{ tag.push_time | harborDatetime: 'short' }}</clr-dg-cell>
+        <clr-dg-cell>{{
+            tag.push_time | harborDatetime : 'short'
+        }}</clr-dg-cell>
    </clr-dg-row>

    <clr-dg-footer>
--- a/src/portal/src/app/base/project/repository/artifact/vulnerability-scanning/result-tip-histogram/result-tip-histogram.component.html
+++ b/src/portal/src/app/base/project/repository/artifact/vulnerability-scanning/result-tip-histogram/result-tip-histogram.component.html
@ -3,7 +3,7 @@
        <div clrTooltipTrigger class="level-border">
            <div [className]="getClass()">
                <div class="inner">
-                    {{ vulnerabilitySummary?.severity | slice: 0:1 }}
+                    {{ vulnerabilitySummary?.severity | slice : 0 : 1 }}
                </div>
            </div>
        </div>
@ -54,7 +54,7 @@
                                'is-white': !isThemeLight(),
                                'is-dark': isThemeLight()
                            }">
-                            {{ vulnerabilitySummary?.severity | slice: 0:1 }}
+                            {{ vulnerabilitySummary?.severity | slice : 0 : 1 }}
                        </div>
                    </div>
                </div>
@ -138,7 +138,7 @@
                <span class="bar-scanning-time"
                    >{{ 'VULNERABILITY.CHART.SCANNING_TIME' | translate }}
                </span>
-                <span>{{ completeTimestamp | harborDatetime: 'short' }}</span>
+                <span>{{ completeTimestamp | harborDatetime : 'short' }}</span>
            </div>
        </clr-tooltip-content>
    </clr-tooltip>
--- a/src/portal/src/app/base/project/repository/artifact/vulnerability-scanning/result-tip.component.html
+++ b/src/portal/src/app/base/project/repository/artifact/vulnerability-scanning/result-tip.component.html
@ -168,7 +168,7 @@
                    >{{ 'VULNERABILITY.CHART.SCANNING_TIME' | translate }}
                </span>
                <span>{{
-                    completeTimestamp | harborDatetime: 'MM/dd/y HH:mm:ss'
+                    completeTimestamp | harborDatetime : 'MM/dd/y HH:mm:ss'
                }}</span>
            </div>
        </clr-tooltip-content>
--- a/src/portal/src/app/base/project/repository/repository-gridview.component.html
+++ b/src/portal/src/app/base/project/repository/repository-gridview.component.html
@ -111,7 +111,7 @@
                    <clr-dg-cell>{{ r.artifact_count }}</clr-dg-cell>
                    <clr-dg-cell>{{ r.pull_count }}</clr-dg-cell>
                    <clr-dg-cell>{{
-                        r.update_time | harborDatetime: 'short'
+                        r.update_time | harborDatetime : 'short'
                    }}</clr-dg-cell>
                </clr-dg-row>
                <clr-dg-footer>
@ -188,7 +188,7 @@
                            'REPOSITORY.LAST_MODIFIED' | translate
                        }}</label>
                        <div>
-                            {{ item.update_time | harborDatetime: 'short' }}
+                            {{ item.update_time | harborDatetime : 'short' }}
                        </div>
                    </div>
                </div>
--- a/src/portal/src/app/base/project/robot-account/add-robot/add-robot.component.html
+++ b/src/portal/src/app/base/project/robot-account/add-robot/add-robot.component.html
@ -187,7 +187,7 @@
                                >:
                                <span>{{
                                    calculateExpiresAt()
-                                        | harborDatetime: 'short'
+                                        | harborDatetime : 'short'
                                }}</span>
                            </span>
                        </clr-control-helper>
--- a/src/portal/src/app/base/project/robot-account/robot-account.component.html
+++ b/src/portal/src/app/base/project/robot-account/robot-account.component.html
@ -207,7 +207,7 @@
                    </div>
                </clr-dg-cell>
                <clr-dg-cell>{{
-                    r.creation_time | harborDatetime: 'short'
+                    r.creation_time | harborDatetime : 'short'
                }}</clr-dg-cell>
                <clr-dg-cell
                    ><app-remaining-time
--- a/src/portal/src/app/base/project/summary/summary.component.html
+++ b/src/portal/src/app/base/project/summary/summary.component.html
@ -160,7 +160,7 @@
                        {{ item.pull_count ? item.pull_count : 0 }}
                    </div>
                    <div class="clr-col-4 ellipsis">
-                        {{ item.update_time | harborDatetime: 'short' }}
+                        {{ item.update_time | harborDatetime : 'short' }}
                    </div>
                </div>
            </div>
--- a/src/portal/src/app/base/project/tag-feature-integration/tag-retention/tag-retention-tasks/tag-retention-tasks/tag-retention-tasks.component.html
+++ b/src/portal/src/app/base/project/tag-feature-integration/tag-retention/tag-retention-tasks/tag-retention-tasks/tag-retention-tasks.component.html
@ -21,7 +21,7 @@
            }}</clr-dg-cell
        >
        <clr-dg-cell>{{
-            task.start_time | harborDatetime: 'medium'
+            task.start_time | harborDatetime : 'medium'
        }}</clr-dg-cell>
        <clr-dg-cell>{{ task.duration }}</clr-dg-cell>
        <clr-dg-cell
--- a/src/portal/src/app/base/project/tag-feature-integration/tag-retention/tag-retention.component.html
+++ b/src/portal/src/app/base/project/tag-feature-integration/tag-retention/tag-retention.component.html
@ -276,7 +276,7 @@
                    ) | translate
                }}</clr-dg-cell>
                <clr-dg-cell>{{
-                    execution.start_time | harborDatetime: 'medium'
+                    execution.start_time | harborDatetime : 'medium'
                }}</clr-dg-cell>
                <clr-dg-cell>{{ execution.duration }}</clr-dg-cell>
                <app-tag-retention-tasks
--- a/src/portal/src/app/base/project/webhook/excutions/executions.component.html
+++ b/src/portal/src/app/base/project/webhook/excutions/executions.component.html
@ -109,10 +109,10 @@
                </clr-signpost>
            </clr-dg-cell>
            <clr-dg-cell>{{
-                execution.start_time | harborDatetime: 'short'
+                execution.start_time | harborDatetime : 'short'
            }}</clr-dg-cell>
            <clr-dg-cell>{{
-                execution.end_time | harborDatetime: 'short'
+                execution.end_time | harborDatetime : 'short'
            }}</clr-dg-cell>
        </clr-dg-row>
        <clr-dg-footer>
--- a/src/portal/src/app/base/project/webhook/tasks/tasks.component.html
+++ b/src/portal/src/app/base/project/webhook/tasks/tasks.component.html
@ -49,7 +49,7 @@
                    <label
                        >{{ 'REPLICATION.CREATION_TIME' | translate }} :</label
                    >
-                    <span>{{ startTime() | harborDatetime: 'short' }}</span>
+                    <span>{{ startTime() | harborDatetime : 'short' }}</span>
                </div>
            </div>
            <div class="flex-block">
@ -138,7 +138,7 @@
                    </clr-tooltip></clr-dg-cell
                >
                <clr-dg-cell>{{
-                    t.creation_time | harborDatetime: 'short'
+                    t.creation_time | harborDatetime : 'short'
                }}</clr-dg-cell>
                <clr-dg-cell>
                    <a
--- a/src/portal/src/app/base/project/webhook/tasks/tasks.component.ts
+++ b/src/portal/src/app/base/project/webhook/tasks/tasks.component.ts
@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { finalize } from 'rxjs/operators';
 import {
@ -22,7 +22,7 @@ import { Task } from 'ng-swagger-gen/models/task';
    templateUrl: './tasks.component.html',
    styleUrls: ['./tasks.component.scss'],
 })
-export class TasksComponent implements OnInit {
+export class TasksComponent implements OnInit, OnDestroy {
    projectId: number;
    policyId: number;
    tasks: Task[] = [];
--- a/src/portal/src/app/base/project/webhook/webhook.component.html
+++ b/src/portal/src/app/base/project/webhook/webhook.component.html
@ -198,7 +198,7 @@
                </div>
            </clr-dg-cell>
            <clr-dg-cell>{{
-                w.creation_time | harborDatetime: 'short'
+                w.creation_time | harborDatetime : 'short'
            }}</clr-dg-cell>
            <clr-dg-cell>{{ w.description }}</clr-dg-cell>
        </clr-dg-row>
--- a/src/portal/src/app/shared/components/label/label.component.html
+++ b/src/portal/src/app/shared/components/label/label.component.html
@ -74,7 +74,7 @@
                    </clr-dg-cell>
                    <clr-dg-cell>{{ label.description }}</clr-dg-cell>
                    <clr-dg-cell>{{
-                        label.creation_time | harborDatetime: 'short'
+                        label.creation_time | harborDatetime : 'short'
                    }}</clr-dg-cell>
                </clr-dg-row>
                <clr-dg-footer>
--- a/src/portal/src/app/shared/components/list-project-ro/list-project-ro.component.html
+++ b/src/portal/src/app/shared/components/list-project-ro/list-project-ro.component.html
@ -19,7 +19,7 @@
        }}</clr-dg-cell>
        <clr-dg-cell>{{ p.repo_count }}</clr-dg-cell>
        <clr-dg-cell>{{
-            p.creation_time | harborDatetime: 'short'
+            p.creation_time | harborDatetime : 'short'
        }}</clr-dg-cell>
    </clr-dg-row>
    <clr-dg-placeholder>{{
--- a/src/portal/src/app/shared/entities/shared.const.ts
+++ b/src/portal/src/app/shared/entities/shared.const.ts
@ -367,7 +367,6 @@ export const stringsForClarity: Partial<ClrCommonStrings> = {
    loading: 'CLARITY.LOADING',
    // Date Picker
    datepickerDialogLabel: 'CLARITY.DATE_PICKER_DIALOG_LABEL',
-    datepickerToggle: 'CLARITY.DATE_PICKER_TOGGLE',
    datepickerToggleChooseDateLabel:
        'CLARITY.DATE_PICKER_TOGGLE_CHOOSE_DATE_LABEL',
    datepickerToggleChangeDateLabel:
--- a/src/portal/src/i18n/lang/de-de-lang.json
+++ b/src/portal/src/i18n/lang/de-de-lang.json
@ -1826,7 +1826,6 @@
        "SIGNPOST_CLOSE": "Signpost Close",
        "LOADING": "LOADING",
        "DATE_PICKER_DIALOG_LABEL": "Choose date",
-        "DATE_PICKER_TOGGLE": "Toggle datepicker",
        "DATE_PICKER_TOGGLE_CHOOSE_DATE_LABEL": "Choose date",
        "DATE_PICKER_TOGGLE_CHANGE_DATE_LABEL": "Change date, {SELECTED_DATE}",
        "DATE_PICKER_PREVIOUS_MONTH": "Previous month",
--- a/src/portal/src/i18n/lang/en-us-lang.json
+++ b/src/portal/src/i18n/lang/en-us-lang.json
@ -1826,7 +1826,6 @@
        "SIGNPOST_CLOSE": "Signpost Close",
        "LOADING": "LOADING",
        "DATE_PICKER_DIALOG_LABEL": "Choose date",
-        "DATE_PICKER_TOGGLE": "Toggle datepicker",
        "DATE_PICKER_TOGGLE_CHOOSE_DATE_LABEL": "Choose date",
        "DATE_PICKER_TOGGLE_CHANGE_DATE_LABEL": "Change date, {SELECTED_DATE}",
        "DATE_PICKER_PREVIOUS_MONTH": "Previous month",
--- a/src/portal/src/i18n/lang/es-es-lang.json
+++ b/src/portal/src/i18n/lang/es-es-lang.json
@ -1823,7 +1823,6 @@
        "SIGNPOST_CLOSE": "Signpost Close",
        "LOADING": "LOADING",
        "DATE_PICKER_DIALOG_LABEL": "Choose date",
-        "DATE_PICKER_TOGGLE": "Toggle datepicker",
        "DATE_PICKER_TOGGLE_CHOOSE_DATE_LABEL": "Choose date",
        "DATE_PICKER_TOGGLE_CHANGE_DATE_LABEL": "Change date, {SELECTED_DATE}",
        "DATE_PICKER_PREVIOUS_MONTH": "Previous month",
--- a/src/portal/src/i18n/lang/fr-fr-lang.json
+++ b/src/portal/src/i18n/lang/fr-fr-lang.json
@ -1793,7 +1793,6 @@
        "SIGNPOST_CLOSE": "Signpost Close",
        "LOADING": "Chargement",
        "DATE_PICKER_DIALOG_LABEL": "Choisir une date",
-        "DATE_PICKER_TOGGLE": "Basculer le sélecteur de date",
        "DATE_PICKER_TOGGLE_CHOOSE_DATE_LABEL": "Choisir une date",
        "DATE_PICKER_TOGGLE_CHANGE_DATE_LABEL": "Changer la date, {SELECTED_DATE}",
        "DATE_PICKER_PREVIOUS_MONTH": "Mois précédent",
--- a/src/portal/src/i18n/lang/pt-br-lang.json
+++ b/src/portal/src/i18n/lang/pt-br-lang.json
@ -1823,7 +1823,6 @@
        "SIGNPOST_CLOSE": "Signpost Close",
        "LOADING": "LOADING",
        "DATE_PICKER_DIALOG_LABEL": "Choose date",
-        "DATE_PICKER_TOGGLE": "Toggle datepicker",
        "DATE_PICKER_TOGGLE_CHOOSE_DATE_LABEL": "Choose date",
        "DATE_PICKER_TOGGLE_CHANGE_DATE_LABEL": "Change date, {SELECTED_DATE}",
        "DATE_PICKER_PREVIOUS_MONTH": "Previous month",
--- a/src/portal/src/i18n/lang/tr-tr-lang.json
+++ b/src/portal/src/i18n/lang/tr-tr-lang.json
@ -1826,7 +1826,6 @@
        "SIGNPOST_CLOSE": "Signpost Close",
        "LOADING": "LOADING",
        "DATE_PICKER_DIALOG_LABEL": "Choose date",
-        "DATE_PICKER_TOGGLE": "Toggle datepicker",
        "DATE_PICKER_TOGGLE_CHOOSE_DATE_LABEL": "Choose date",
        "DATE_PICKER_TOGGLE_CHANGE_DATE_LABEL": "Change date, {SELECTED_DATE}",
        "DATE_PICKER_PREVIOUS_MONTH": "Previous month",
--- a/src/portal/src/i18n/lang/zh-cn-lang.json
+++ b/src/portal/src/i18n/lang/zh-cn-lang.json
@ -1823,7 +1823,6 @@
        "SIGNPOST_CLOSE": "指示牌关闭",
        "LOADING": "加载中",
        "DATE_PICKER_DIALOG_LABEL": "选择日期",
-        "DATE_PICKER_TOGGLE": "切换日期选择器",
        "DATE_PICKER_TOGGLE_CHOOSE_DATE_LABEL": "选择日期",
        "DATE_PICKER_TOGGLE_CHANGE_DATE_LABEL": "选择日期, {SELECTED_DATE}",
        "DATE_PICKER_PREVIOUS_MONTH": "前一月",
--- a/src/portal/src/i18n/lang/zh-tw-lang.json
+++ b/src/portal/src/i18n/lang/zh-tw-lang.json
@ -1816,7 +1816,6 @@
    "SIGNPOST_CLOSE": "Signpost Close",
    "LOADING": "LOADING",
    "DATE_PICKER_DIALOG_LABEL": "Choose date",
-    "DATE_PICKER_TOGGLE": "Toggle datepicker",
    "DATE_PICKER_TOGGLE_CHOOSE_DATE_LABEL": "Choose date",
    "DATE_PICKER_TOGGLE_CHANGE_DATE_LABEL": "Change date, {SELECTED_DATE}",
    "DATE_PICKER_PREVIOUS_MONTH": "Previous month",