Merge pull request #1856 from wknet123/dev-revised

Updates for date time format by locale

src/ui_ng/src/app/app.component.ts

@@ -1,10 +1,11 @@
-import { Component } from '@angular/core';
+import { Component, ReflectiveInjector, LOCALE_ID } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { CookieService } from 'angular2-cookie/core';
 
 import { supportedLangs, enLang } from './shared/shared.const';
 import { SessionService } from './shared/session.service';
 
+
 @Component({
     selector: 'harbor-app',
     templateUrl: 'app.component.html'
@@ -21,7 +22,7 @@ export class AppComponent {
         let langSetting = this.cookie.get("harbor-lang");
         if (!langSetting || langSetting.trim() === "") {
             //Use browser lang
-            langSetting = translate.getBrowserLang();
+            langSetting = translate.getBrowserCultureLang();
         }
            
         let selectedLang = this.isLangMatch(langSetting, supportedLangs) ? langSetting : enLang;

src/ui_ng/src/app/app.module.ts

@@ -1,5 +1,5 @@
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule, APP_INITIALIZER } from '@angular/core';
+import { NgModule, APP_INITIALIZER, LOCALE_ID } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
 import { ClarityModule } from 'clarity-angular';
@@ -11,7 +11,7 @@ import { SharedModule } from './shared/shared.module';
 import { AccountModule } from './account/account.module';
 import { ConfigurationModule } from './config/config.module';
 
-import { TranslateModule, TranslateLoader, MissingTranslationHandler } from "@ngx-translate/core";
+import { TranslateModule, TranslateLoader, TranslateService, MissingTranslationHandler } from "@ngx-translate/core";
 import { MyMissingTranslationHandler } from './i18n/missing-trans.handler';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { Http } from '@angular/http';
@@ -26,6 +26,10 @@ export function initConfig(configService: AppConfigService) {
     return () => configService.load();
 }
 
+function getCurrentLanguage(translateService: TranslateService) {
+    return translateService.currentLang;
+}
+
 @NgModule({
     declarations: [
         AppComponent,
@@ -55,8 +59,13 @@ export function initConfig(configService: AppConfigService) {
         useFactory: initConfig, 
         deps: [ AppConfigService ],
         multi: true
-    }],
+      },
+      {
+        provide: LOCALE_ID,
+        useFactory: getCurrentLanguage,
+        deps:[ TranslateService ]
+      }
+    ],
     bootstrap: [AppComponent]
 })
-export class AppModule {
+export class AppModule {}
-}

src/ui_ng/src/app/base/navigator/navigator.component.html

@@ -18,8 +18,8 @@
                 <clr-icon shape="caret down"></clr-icon>
             </button>
             <div class="dropdown-menu">
-                <a href="javascript:void(0)" clrDropdownItem (click)='switchLanguage("en")' [class.lang-selected]='matchLang("en")'>English</a>
+                <a href="javascript:void(0)" clrDropdownItem (click)='switchLanguage("en-US")' [class.lang-selected]='matchLang("en")'>English</a>
-                <a href="javascript:void(0)" clrDropdownItem (click)='switchLanguage("zh")' [class.lang-selected]='matchLang("zh")'>中文简体</a>
+                <a href="javascript:void(0)" clrDropdownItem (click)='switchLanguage("zh-CN")' [class.lang-selected]='matchLang("zh")'>中文简体</a>
             </div>
         </clr-dropdown>
         <clr-dropdown [clrMenuPosition]="'bottom-right'" class="dropdown" *ngIf="isSessionValid">

src/ui_ng/src/app/base/navigator/navigator.component.ts

@@ -1,4 +1,4 @@
-import { Component, Output, EventEmitter, OnInit, Inject } from '@angular/core';
+import { Component, Output, EventEmitter, OnInit } from '@angular/core';
 import { Router, NavigationExtras } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 
@@ -35,7 +35,9 @@ export class NavigatorComponent implements OnInit {
         private cookie: CookieService,
         private appConfigService: AppConfigService,
         private msgHandler: MessageHandlerService,
-        private searchTrigger: SearchTriggerService) { }
+        private searchTrigger: SearchTriggerService) {
+            
+        }
 
     ngOnInit(): void {
         this.selectedLang = this.translate.currentLang;
@@ -133,8 +135,7 @@ export class NavigatorComponent implements OnInit {
             //TODO:
             console.error('Language ' + lang.trim() + ' is not suppoted');
         }
-        //Try to switch backend lang
+        window.location.reload();
-        //this.session.switchLanguage(lang).catch(error => console.error(error));
     }
 
     //Handle the home action

src/ui_ng/src/app/log/audit-log.component.html

@@ -35,7 +35,7 @@
         <clr-dg-cell>{{l.repo_name}}</clr-dg-cell>
         <clr-dg-cell>{{l.repo_tag}}</clr-dg-cell>
         <clr-dg-cell>{{l.operation}}</clr-dg-cell>
-        <clr-dg-cell>{{l.op_time}}</clr-dg-cell>
+        <clr-dg-cell>{{l.op_time | date: 'short'}}</clr-dg-cell>
       </clr-dg-row>
       <clr-dg-footer>
         {{totalRecordCount}} {{'AUDIT_LOG.ITEMS' | translate}}

src/ui_ng/src/app/log/recent-log.component.html

@@ -30,7 +30,7 @@
                 <clr-dg-cell>{{l.repo_name}}</clr-dg-cell>
                 <clr-dg-cell>{{l.repo_tag}}</clr-dg-cell>
                 <clr-dg-cell>{{l.operation}}</clr-dg-cell>
-                <clr-dg-cell>{{formatDateTime(l.op_time)}}</clr-dg-cell>
+                <clr-dg-cell>{{l.op_time | date: 'short'}}</clr-dg-cell>
             </clr-dg-row>
             <clr-dg-footer>{{ (recentLogs ? recentLogs.length : 0) }} {{'AUDIT_LOG.ITEMS' | translate}}</clr-dg-footer>
         </clr-datagrid>

src/ui_ng/src/app/log/recent-log.component.ts

@@ -65,11 +65,6 @@ export class RecentLogComponent implements OnInit {
         this.retrieveLogs();
     }
 
-    public formatDateTime(dateTime: string) {
-        let dt: Date = new Date(dateTime);
-        return dt.toLocaleString();
-    }
-
     private retrieveLogs(): void {
         if (this.lines < 10) {
             this.lines = 10;

src/ui_ng/src/app/project/list-project/list-project.component.html

@@ -14,7 +14,7 @@
         <clr-dg-cell>{{ (p.public === 1 ? 'PROJECT.PUBLIC' : 'PROJECT.PRIVATE') | translate}}</clr-dg-cell>
         <clr-dg-cell *ngIf="showRoleInfo">{{roleInfo[p.current_user_role_id] | translate}}</clr-dg-cell>
         <clr-dg-cell>{{p.repo_count}}</clr-dg-cell>
-        <clr-dg-cell>{{p.creation_time}}</clr-dg-cell>
+        <clr-dg-cell>{{p.creation_time | date: 'short'}}</clr-dg-cell>
     </clr-dg-row>
     <clr-dg-footer>
         {{totalRecordCount || (projects ? projects.length : 0)}} {{'PROJECT.ITEMS' | translate}}

src/ui_ng/src/app/replication/destination/destination.component.html

@@ -25,7 +25,7 @@
                 </clr-dg-action-overflow>
                 <clr-dg-cell>{{t.name}}</clr-dg-cell>
                 <clr-dg-cell>{{t.endpoint}}</clr-dg-cell>
-                <clr-dg-cell>{{t.creation_time}}</clr-dg-cell>
+                <clr-dg-cell>{{t.creation_time | date: 'short'}}</clr-dg-cell>
             </clr-dg-row>
             <clr-dg-footer>{{ (targets ? targets.length : 0) }} {{'DESTINATION.ITEMS' | translate}}</clr-dg-footer>
         </clr-datagrid>

src/ui_ng/src/app/replication/list-job/list-job.component.html

@@ -9,8 +9,8 @@
         <clr-dg-cell>{{j.repository}}</clr-dg-cell>
         <clr-dg-cell>{{j.status}}</clr-dg-cell>
         <clr-dg-cell>{{j.operation}}</clr-dg-cell>
-        <clr-dg-cell>{{j.creation_time}}</clr-dg-cell>
+        <clr-dg-cell>{{j.creation_time | date: 'short'}}</clr-dg-cell>
-        <clr-dg-cell>{{j.update_time}}</clr-dg-cell>
+        <clr-dg-cell>{{j.update_time | date: 'short'}}</clr-dg-cell>
         <clr-dg-cell>
             <a href="/api/jobs/replication/{{j.id}}/log" target="_BLANK">
                 <clr-icon shape="clipboard"></clr-icon>

src/ui_ng/src/app/repository/tag-repository/tag-repository.component.html

@@ -37,7 +37,7 @@
             <clr-icon shape="close" *ngIf="!t.signed" style="color: #C92100;"></clr-icon>
         </clr-dg-cell>
         <clr-dg-cell>{{t.author}}</clr-dg-cell>
-        <clr-dg-cell>{{t.created | date: 'yyyy/MM/dd'}}</clr-dg-cell>
+        <clr-dg-cell>{{t.created | date: 'short'}}</clr-dg-cell>
         <clr-dg-cell>{{t.dockerVersion}}</clr-dg-cell>
         <clr-dg-cell>{{t.architecture}}</clr-dg-cell>
         <clr-dg-cell>{{t.os}}</clr-dg-cell>

src/ui_ng/src/app/shared/list-policy/list-policy.component.html

@@ -20,9 +20,12 @@
           </template>
         </clr-dg-cell>
         <clr-dg-cell *ngIf="projectless">{{p.project_name}}</clr-dg-cell>
-        <clr-dg-cell>{{p.description}}</clr-dg-cell>
+        <clr-dg-cell>{{p.description ? p.description : '-'}}</clr-dg-cell>
         <clr-dg-cell>{{p.target_name}}</clr-dg-cell>
-        <clr-dg-cell>{{p.start_time}}</clr-dg-cell>
+        <clr-dg-cell>
+          <template [ngIf]="p.start_time === nullTime">-</template>
+          <template [ngIf]="p.start_time !== nullTime">{{p.start_time | date: 'short'}}</template>
+        </clr-dg-cell>
         <clr-dg-cell>
             {{ (p.enabled === 1 ? 'REPLICATION.ENABLED' : 'REPLICATION.DISABLED') | translate}}
         </clr-dg-cell>

src/ui_ng/src/app/shared/list-policy/list-policy.component.ts

@@ -18,6 +18,8 @@ import { Subscription } from 'rxjs/Subscription';
 })
 export class ListPolicyComponent implements OnDestroy {
 
+  nullTime: string = '0001-01-01T00:00:00Z';
+
   @Input() policies: Policy[];
   @Input() projectless: boolean;
   @Input() selectedId: number;

src/ui_ng/src/app/shared/list-project-ro/list-project-ro.component.html

@@ -7,7 +7,7 @@
         <clr-dg-cell><a href="javascript:void(0)" (click)="goToLink(p.project_id)">{{p.name}}</a></clr-dg-cell>
         <clr-dg-cell>{{ (p.public === 1 ? 'PROJECT.PUBLIC' : 'PROJECT.PRIVATE') | translate}}</clr-dg-cell>
         <clr-dg-cell>{{p.repo_count}}</clr-dg-cell>
-        <clr-dg-cell>{{p.creation_time}}</clr-dg-cell>
+        <clr-dg-cell>{{p.creation_time | date: 'short'}}</clr-dg-cell>
     </clr-dg-row>
     <clr-dg-footer>
         {{totalRecordCount || (projects ? projects.length : 0)}} {{'PROJECT.ITEMS' | translate}}

src/ui_ng/src/app/shared/session.service.ts

@@ -161,4 +161,5 @@ export class SessionService {
     getProjectMembers(): Member[] {
         return this.projectMembers;
     }
+
 }

src/ui_ng/src/app/shared/shared.const.ts

@@ -1,8 +1,8 @@
-export const supportedLangs = ['en', 'zh'];
+export const supportedLangs = ['en-US', 'zh-CN'];
-export const enLang = "en";
+export const enLang = "en-US";
 export const languageNames = {
-  "en": "English",
+  "en-US": "English",
-  "zh": "中文简体"
+  "zh-CN": "中文简体"
 };
 export const enum AlertType {
   DANGER, WARNING, INFO, SUCCESS

src/ui_ng/src/app/shared/shared.utils.ts

@@ -11,8 +11,7 @@ export const errorHandler = function (error: any): string {
     if (!error) {
         return "UNKNOWN_ERROR";
     }
-    console.log(JSON.stringify(error));
+    console.log(error);
-
     if (!(error.statusCode || error.status)) {
         //treat as string message
         return '' + error;

src/ui_ng/src/app/user/user.component.html

@@ -25,9 +25,7 @@
                     <clr-dg-cell>{{user.username}}</clr-dg-cell>
                     <clr-dg-cell>{{isSystemAdmin(user)}}</clr-dg-cell>
                     <clr-dg-cell>{{user.email}}</clr-dg-cell>
-                    <clr-dg-cell>
+                    <clr-dg-cell>{{user.creation_time | date: 'short'}}</clr-dg-cell>
-                        {{user.creation_time}}
-                    </clr-dg-cell>
                 </clr-dg-row>
                 <clr-dg-footer>{{users.length}} {{'USER.ITEMS' | translate}}</clr-dg-footer>
             </clr-datagrid>

src/ui_ng/src/index.html

@@ -7,7 +7,6 @@
     <base href="/">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="icon" type="image/x-icon" href="favicon.ico?v=2">
-    <link rel="stylesheet" type="text/css" href="styles.css">
 </head>
 
 <body>

src/ui_ng/src/styles.css

@@ -1,9 +0,0 @@
-/* You can add global styles to this file, and also import other style files */
-.datagrid-content-wrapper {
-  overflow: hidden;
-}
-
-.form-group-label-override {
-    font-size: 14px;
-    font-weight: 400;
-}