You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@datalab.apache.org by dg...@apache.org on 2020/10/07 09:52:01 UTC

[incubator-datalab] 02/02: [DATALAB-2087]: Fixed issues connected with localization

This is an automated email from the ASF dual-hosted git repository.

dgnatyshyn pushed a commit to branch DATALAB-2087
in repository https://gitbox.apache.org/repos/asf/incubator-datalab.git

commit cadf880577219c3cc325d5a7a594e457c3a4cd7d
Author: Dmytro_Gnatyshyn <di...@ukr.net>
AuthorDate: Wed Oct 7 12:51:43 2020 +0300

    [DATALAB-2087]: Fixed issues connected with localization
---
 .../pipes/long-date-pipe}/index.ts                 | 16 ++++------
 .../pipes/long-date-pipe/long-date.pipe.ts}        | 24 +++++++--------
 .../src/app/core/services/localization.service.ts  |  8 ++++-
 .../src/app/reports/reporting/reporting.module.ts  |  4 ++-
 .../reporting/toolbar/toolbar.component.html       |  4 +--
 .../cluster-details/cluster-details.component.html |  4 ++-
 .../cluster-details/cluster-details.component.ts   |  3 --
 .../computational/cluster-details/index.ts         |  3 +-
 .../detail-dialog/detail-dialog.component.html     |  2 +-
 .../detail-dialog/detail-dialog.component.ts       |  4 ---
 .../resources/exploratory/detail-dialog/index.ts   | 16 +++++-----
 .../src/app/resources/resources-grid/index.ts      | 34 ++++++++++++----------
 .../resources-grid/resources-grid.component.html   |  2 +-
 13 files changed, 62 insertions(+), 62 deletions(-)

diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/computational/cluster-details/index.ts b/services/self-service/src/main/resources/webapp/src/app/core/pipes/long-date-pipe/index.ts
similarity index 61%
copy from services/self-service/src/main/resources/webapp/src/app/resources/computational/cluster-details/index.ts
copy to services/self-service/src/main/resources/webapp/src/app/core/pipes/long-date-pipe/index.ts
index 88bfff6..8bd4f7f 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/computational/cluster-details/index.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/pipes/long-date-pipe/index.ts
@@ -19,18 +19,12 @@
 
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-
-import { MaterialModule } from '../../../shared/material.module';
-import { DetailComputationalResourcesComponent } from './cluster-details.component';
-
-export * from './cluster-details.component';
+import {LongDatePipe} from './long-date.pipe';
 
 @NgModule({
-  imports: [CommonModule, FormsModule, ReactiveFormsModule, MaterialModule],
-  declarations: [DetailComputationalResourcesComponent],
-  entryComponents: [DetailComputationalResourcesComponent],
-  exports: [DetailComputationalResourcesComponent],
+  imports: [CommonModule],
+  declarations: [LongDatePipe],
+  exports: [LongDatePipe]
 })
 
-export class DetailComputationalResourcesModule { }
+export class LongDatePipeModule { }
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/computational/cluster-details/index.ts b/services/self-service/src/main/resources/webapp/src/app/core/pipes/long-date-pipe/long-date.pipe.ts
similarity index 54%
copy from services/self-service/src/main/resources/webapp/src/app/resources/computational/cluster-details/index.ts
copy to services/self-service/src/main/resources/webapp/src/app/core/pipes/long-date-pipe/long-date.pipe.ts
index 88bfff6..ba64e45 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/computational/cluster-details/index.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/pipes/long-date-pipe/long-date.pipe.ts
@@ -17,20 +17,18 @@
  * under the License.
  */
 
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { Pipe, PipeTransform } from '@angular/core';
+import {LocalizationService} from '../../services/localization.service';
+import {formatDate} from '@angular/common';
 
-import { MaterialModule } from '../../../shared/material.module';
-import { DetailComputationalResourcesComponent } from './cluster-details.component';
+@Pipe({ name: 'longDate' })
 
-export * from './cluster-details.component';
+export class LongDatePipe implements PipeTransform {
+  constructor(private localizationService: LocalizationService) { }
 
-@NgModule({
-  imports: [CommonModule, FormsModule, ReactiveFormsModule, MaterialModule],
-  declarations: [DetailComputationalResourcesComponent],
-  entryComponents: [DetailComputationalResourcesComponent],
-  exports: [DetailComputationalResourcesComponent],
-})
+  transform(value: any, format: string = 'full') {
+    if (!value) { return ; }
 
-export class DetailComputationalResourcesModule { }
+    return formatDate(value, format, (this.localizationService.locale  === 'en') ? 'en' : 'en-GB');
+  }
+}
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/services/localization.service.ts b/services/self-service/src/main/resources/webapp/src/app/core/services/localization.service.ts
index ab19752..7aa9a0a 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/services/localization.service.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/services/localization.service.ts
@@ -48,9 +48,15 @@ export class LocalizationService {
     if (culture.indexOf('-') !== -1 && culture !== 'en-GB') {
       culture = culture.substr(0, culture.indexOf('-'));
     }
-    /* webpackInclude: /(uk|sv)\.js$/ */
+
     import(
       `@angular/common/locales/${culture}.js`
       ).then(module => registerLocaleData(module.default));
+
+    if (culture !== 'en' && culture !== 'en-GB') {
+      import(
+        `@angular/common/locales/en-GB.js`
+        ).then(module => registerLocaleData(module.default));
+    }
   }
 }
diff --git a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting.module.ts b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting.module.ts
index 65d7ea9..055e555 100644
--- a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting.module.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting.module.ts
@@ -29,6 +29,7 @@ import { KeysPipeModule, LineBreaksPipeModule } from '../../core/pipes';
 import { ReportingGridComponent } from './reporting-grid/reporting-grid.component';
 import { ToolbarComponent } from './toolbar/toolbar.component';
 import {LocalCurrencyModule} from '../../core/pipes/local-currency-pipe';
+import {LocalDatePipeModule} from '../../core/pipes/local-date-pipe';
 
 @NgModule({
     imports: [
@@ -39,7 +40,8 @@ import {LocalCurrencyModule} from '../../core/pipes/local-currency-pipe';
         LineBreaksPipeModule,
         NgDateRangePickerModule,
         MaterialModule,
-        LocalCurrencyModule
+        LocalCurrencyModule,
+        LocalDatePipeModule
     ],
   declarations: [
     ReportingComponent,
diff --git a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/toolbar/toolbar.component.html b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/toolbar/toolbar.component.html
index d7da74b..ca883aa 100644
--- a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/toolbar/toolbar.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/toolbar/toolbar.component.html
@@ -24,8 +24,8 @@
         </span><strong>{{ reportData.tag_resource_id }}</strong></div>
       <div class="report-period info_color" *ngIf="availablePeriodFrom && availablePeriodTo">
         <span>Available reporting period from:</span>
-        <strong>{{ availablePeriodFrom.join('/') | date }} </strong>
-        to: <strong>{{ availablePeriodTo.join('/') | date }}</strong>
+        <strong>{{ availablePeriodFrom.join('/') | localDate }} </strong>
+        to: <strong>{{ availablePeriodTo.join('/') | localDate }}</strong>
       </div>
     </div>
   </div>
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/computational/cluster-details/cluster-details.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/computational/cluster-details/cluster-details.component.html
index 0872a25..c9b048f 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/computational/cluster-details/cluster-details.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/computational/cluster-details/cluster-details.component.html
@@ -98,7 +98,9 @@
 
         <div *ngIf="resource.status === 'running'">
           <div class="row-wrap">
-            <p class="time_info">Up time {{upTimeInHours}} hour(s) since {{upTimeSince || "not specified."}}</p>
+            <p class="time_info">Up time {{upTimeInHours}} hour(s) since {{resource.up_time ? (resource.up_time | longDate) : "not specified."
+              }}
+            </p>
           </div>
           <div class="m-top-10">
             <p *ngFor="let item of resource.computational_url" class="ellipsis flex" (mouseleave)="hideCopyIcon()">
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/computational/cluster-details/cluster-details.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/computational/cluster-details/cluster-details.component.ts
index 4d2e6dd..6d72f49 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/computational/cluster-details/cluster-details.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/computational/cluster-details/cluster-details.component.ts
@@ -44,7 +44,6 @@ export class DetailComputationalResourcesComponent implements OnInit {
   @ViewChild('configurationNode', { static: false }) configuration;
 
   upTimeInHours: number;
-  upTimeSince: string = '';
   tooltip: boolean = false;
   config: Array<{}> = [];
   public configurationForm: FormGroup;
@@ -71,8 +70,6 @@ export class DetailComputationalResourcesComponent implements OnInit {
 
 
     this.upTimeInHours = (this.resource.up_time) ? DateUtils.diffBetweenDatesInHours(this.resource.up_time) : 0;
-    this.upTimeSince = (this.resource.up_time) ?
-      new Date(this.resource.up_time).toString().substr(0, new Date(this.resource.up_time).toString().indexOf('(')) : '';
     this.initFormModel();
 
     if (this.resource.image === 'docker.datalab-dataengine') this.getClusterConfiguration();
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/computational/cluster-details/index.ts b/services/self-service/src/main/resources/webapp/src/app/resources/computational/cluster-details/index.ts
index 88bfff6..1cc87c8 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/computational/cluster-details/index.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/computational/cluster-details/index.ts
@@ -23,11 +23,12 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { MaterialModule } from '../../../shared/material.module';
 import { DetailComputationalResourcesComponent } from './cluster-details.component';
+import {LongDatePipeModule} from '../../../core/pipes/long-date-pipe';
 
 export * from './cluster-details.component';
 
 @NgModule({
-  imports: [CommonModule, FormsModule, ReactiveFormsModule, MaterialModule],
+  imports: [CommonModule, FormsModule, ReactiveFormsModule, MaterialModule, LongDatePipeModule],
   declarations: [DetailComputationalResourcesComponent],
   entryComponents: [DetailComputationalResourcesComponent],
   exports: [DetailComputationalResourcesComponent],
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.html
index a667058..9258d03 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.html
@@ -80,7 +80,7 @@
           <div class="detail-info" *ngIf="!notebook.error_message">
             <p>Edge Node IP Address {{notebook.node_ip}}</p>
             <p *ngIf="notebook.status === 'running'">Up time {{upTimeInHours}} hour(s) since
-              {{upTimeSince || "not specified."}}</p>
+              {{notebook.time ? (notebook.time | longDate ) : "not specified."}}</p>
             <p *ngIf="notebook.url?.length">Open following URL(s) in your browser to access this box:</p>
             <div class="links_block">
               <ng-container *ngFor="let item of notebook.url">
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.ts
index 22c4bfa..4800faa 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.ts
@@ -42,7 +42,6 @@ export class DetailDialogComponent implements OnInit {
   private isCopied: boolean = true;
   notebook: any;
   upTimeInHours: number;
-  upTimeSince: string = '';
   tooltip: boolean = false;
   config: Array<{}> = [];
   bucketStatus: object = {};
@@ -50,7 +49,6 @@ export class DetailDialogComponent implements OnInit {
   isCopyIconVissible: {bucket} = {bucket: false};
 
   public configurationForm: FormGroup;
-
   @ViewChild('configurationNode', { static: false }) configuration;
 
 
@@ -73,8 +71,6 @@ export class DetailDialogComponent implements OnInit {
       this.tooltip = false;
 
       this.upTimeInHours = (this.notebook.time) ? DateUtils.diffBetweenDatesInHours(this.notebook.time) : 0;
-      this.upTimeSince = (this.notebook.time) ?
-        new Date(this.notebook.time).toString().substr(0, new Date(this.notebook.time).toString().indexOf('(')) : '';
       this.initFormModel();
       this.getClusterConfiguration();
     if (this.notebook.edgeNodeStatus === 'terminated' ||
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/index.ts b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/index.ts
index f46a7e5..24ec7c5 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/index.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/index.ts
@@ -23,17 +23,19 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MaterialModule } from '../../../shared/material.module';
 import { DetailDialogComponent } from './detail-dialog.component';
 import { DirectivesModule } from '../../../core/directives';
+import {LongDatePipeModule} from '../../../core/pipes/long-date-pipe';
 
 export * from './detail-dialog.component';
 
 @NgModule({
-  imports: [
-    CommonModule,
-    FormsModule,
-    ReactiveFormsModule,
-    MaterialModule,
-    DirectivesModule
-  ],
+    imports: [
+        CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MaterialModule,
+        DirectivesModule,
+        LongDatePipeModule
+    ],
   declarations: [DetailDialogComponent],
   entryComponents: [DetailDialogComponent],
   exports: [DetailDialogComponent]
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/index.ts b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/index.ts
index 39a9732..6bbc5a0 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/index.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/index.ts
@@ -32,24 +32,26 @@ import { InstallLibrariesModule } from '../exploratory/install-libraries';
 import { AmiCreateDialogModule } from '../exploratory/ami-create-dialog';
 import { SchedulerModule } from '../scheduler';
 import { UnderscorelessPipeModule } from '../../core/pipes/underscoreless-pipe';
+import {LocalCurrencyModule} from '../../core/pipes/local-currency-pipe';
 
 @NgModule({
-  imports: [
-    CommonModule,
-    RouterModule,
-    ComputationalResourcesModule,
-    ConfirmationDialogModule,
-    BubbleModule,
-    DetailDialogModule,
-    ComputationalResourceCreateDialogModule,
-    FormControlsModule,
-    CostDetailsDialogModule,
-    InstallLibrariesModule,
-    SchedulerModule,
-    AmiCreateDialogModule,
-    UnderscorelessPipeModule,
-    MaterialModule
-  ],
+    imports: [
+        CommonModule,
+        RouterModule,
+        ComputationalResourcesModule,
+        ConfirmationDialogModule,
+        BubbleModule,
+        DetailDialogModule,
+        ComputationalResourceCreateDialogModule,
+        FormControlsModule,
+        CostDetailsDialogModule,
+        InstallLibrariesModule,
+        SchedulerModule,
+        AmiCreateDialogModule,
+        UnderscorelessPipeModule,
+        MaterialModule,
+        LocalCurrencyModule
+    ],
   declarations: [ResourcesGridComponent],
   exports: [ResourcesGridComponent]
 })
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.html
index 3a6306c..6fd6cab 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.html
@@ -147,7 +147,7 @@
             </computational-resources-list>
           </td>
           <td *ngIf="healthStatus?.billingEnabled" class="cost-col">
-            <span class="total_cost">{{ element.billing.report_lines.length ? element.cost : 'N/A' }} {{ element.currency_code || '' }}</span>
+            <span class="total_cost">{{ element.billing.report_lines.length ? (element.cost | localcurrency) : 'N/A' }}</span>
             <span (click)="element.billing && printCostDetails(element)" class="currency_details"
               [ngClass]="{ 'not-allowed' : !element.billing.report_lines.length }">
               <i class="material-icons">help_outline</i>


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@datalab.apache.org
For additional commands, e-mail: commits-help@datalab.apache.org