Change Datapicker on replication to clarity widget

Signed-off-by: FangyuanCheng <fangyuanc@vmware.com>

src/portal/lib/src/datetime-picker/date-validator.directive.ts

@@ -50,7 +50,8 @@ export function dateValidator(): ValidatorFn {
     if (controlValue) {
       const regYMD = /^(19|20)\d\d([- /.])(0[1-9]|1[012])\2(0[1-9]|[12][0-9]|3[01])$/g;
       const regDMY = /^(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)\d\d$/g;
-      valid = regYMD.test(controlValue) || regDMY.test(controlValue);
+      const regMDY = /^(0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])[- /.](19|20)\d\d$/g;
+      valid = regYMD.test(controlValue) || regDMY.test(controlValue) || regMDY.test(controlValue);
     }
     return valid
       ? Validators.nullValidator

src/portal/lib/src/datetime-picker/datetime-picker.component.html

@@ -1,7 +1,6 @@
-<clr-icon shape="date"></clr-icon>
+<div aria-haspopup="true" role="tooltip" [class.invalid]="dateInvalid" class="tooltip tooltip-validation tooltip-sm">
-<label aria-haspopup="true" role="tooltip" [class.invalid]="dateInvalid" class="tooltip tooltip-validation tooltip-sm">
+  <input clrDate type="date" #searchTime="ngModel" [(ngModel)]="dateInput" name="searchTime" placeholder="mm/dd/yyyy" dateValidator (ngModelChange)="doSearch()">
-  <input type="date" #searchTime="ngModel" [(ngModel)]="dateInput" name="searchTime" placeholder="dd/mm/yyyy" dateValidator (change)="doSearch()">
   <span *ngIf="dateInvalid" class="tooltip-content">
     {{'AUDIT_LOG.INVALID_DATE' | translate }}
   </span>
-</label>
+</div>

src/portal/lib/src/datetime-picker/datetime-picker.component.scss

@@ -0,0 +1,14 @@
+.tooltip {
+    &.tooltip-validation.invalid {
+        &::before{
+        top: 0.7em;
+        right: 3em;
+        }
+    }
+    >.tooltip-content{
+        opacity: 1;
+        visibility: visible;
+        left: 75%;
+        background-color: #c92100;
+    }
+}

src/portal/lib/src/datetime-picker/datetime-picker.component.ts

@@ -10,7 +10,8 @@ import { NgModel } from "@angular/forms";
 
 @Component({
   selector: "hbr-datetime",
-  templateUrl: "./datetime-picker.component.html"
+  templateUrl: "./datetime-picker.component.html",
+  styleUrls: ["./datetime-picker.component.scss"]
 })
 export class DatePickerComponent implements OnChanges {
   @Input() dateInput: string;
@@ -41,7 +42,7 @@ export class DatePickerComponent implements OnChanges {
     ) {
       let parts = strDate.split(/[-\/]/);
       strDate =
-        parts[2] /*Year*/ + "-" + parts[1] /*Month*/ + "-" + parts[0] /*Date*/;
+        parts[2] /*Year*/ + "-" + parts[0] /*Month*/+ "-" + parts[1] /*Date*/;
     }
     return strDate;
   }

src/portal/lib/src/replication/replication.component.html

@@ -28,8 +28,8 @@
           </span>
         </div>
       </div>
-      <div class="row flex-items-xs-right option-right" [hidden]="currentJobSearchOption === 0">
+      <div class="row flex-items-xs-right row-right" [hidden]="currentJobSearchOption === 0">
-        <div class="select" style="float: left;">
+        <div class="select select-status">
           <select (change)="doFilterJobStatus($event)">
             <option *ngFor="let j of jobStatus" value="{{j.key}}" [selected]="currentJobStatus.key === j.key">{{j.description | translate}}</option>
           </select>

src/portal/lib/src/replication/replication.component.scss

@@ -28,3 +28,13 @@
     z-index: 100;
     height: 32px;
 }
+
+.select-status {
+  float: left;
+  margin-top: 6px;
+  margin-right: 5px;
+}
+
+.row-right {
+  padding-right: 50px;
+}

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

@@ -9,7 +9,7 @@
                 </span>
             </div>
         </div>
-        <div class="row flex-items-xs-right option-right" [hidden]="currentOption === 0">
+        <div class="row flex-items-xs-right row-right" [hidden]="currentOption === 0">
             <clr-dropdown>
                 <button class="btn btn-link" clrDropdownToggle>
                     {{'AUDIT_LOG.OPERATIONS' | translate}}
@@ -24,20 +24,8 @@
                 </clr-dropdown-menu>
             </clr-dropdown>
             <div class="flex-xs-middle">
-                <clr-icon shape="date"></clr-icon>
+                <hbr-datetime [dateInput]="search.startTime" (search)="doSearchByStartTime($event)"></hbr-datetime>
-                <label for="fromDateInput" aria-haspopup="true" role="tooltip" [class.invalid]="fromTimeInvalid" class="tooltip tooltip-validation invalid tooltip-sm">
+                <hbr-datetime [dateInput]="search.endTime" [oneDayOffset]="true" (search)="doSearchByEndTime($event)"></hbr-datetime>
-            <input id="fromDateInput" type="date" #fromTime="ngModel" name="from" [(ngModel)]="queryParam.fromTime" dateValidator placeholder="dd/mm/yyyy" (change)="doSearchByStartTime(fromTime.value)">
-            <span *ngIf="fromTimeInvalid" class="tooltip-content">
-               {{'AUDIT_LOG.INVALID_DATE' | translate }}
-            </span>
-          </label>
-                <clr-icon shape="date"></clr-icon>
-                <label for="toDateInput" aria-haspopup="true" role="tooltip" [class.invalid]="toTimeInvalid" class="tooltip tooltip-validation invalid tooltip-sm">
-            <input id="toDateInput" type="date" #toTime="ngModel" name="to" [(ngModel)]="queryParam.toTime" dateValidator placeholder="dd/mm/yyyy" (change)="doSearchByEndTime(toTime.value)">
-            <span *ngIf="toTimeInvalid" class="tooltip-content">
-               {{'AUDIT_LOG.INVALID_DATE' | translate }}
-            </span>
-          </label>
             </div>
         </div>
     </div>

src/portal/src/app/log/audit-log.component.scss

@@ -9,3 +9,7 @@
 .refresh-btn:hover {
     color: #007CBB;
 }
+
+.row-right {
+    padding-right: 60px;
+}

src/portal/src/app/log/audit-log.component.ts

@@ -41,13 +41,18 @@ class FilterOption {
   }
 }
 
+export class SearchOption {
+  startTime: string = "";
+  endTime: string = "";
+}
+
 @Component({
   selector: 'audit-log',
   templateUrl: './audit-log.component.html',
   styleUrls: ['./audit-log.component.scss']
 })
 export class AuditLogComponent implements OnInit {
-
+  search: SearchOption = new SearchOption();
   currentUser: SessionUser;
   projectId: number;
   queryParam: AuditLog = new AuditLog();
@@ -70,17 +75,6 @@ export class AuditLogComponent implements OnInit {
   currentPage = 1;
   totalPage = 0;
 
-  @ViewChild('fromTime') fromTimeInput: NgModel;
-  @ViewChild('toTime') toTimeInput: NgModel;
-
-  get fromTimeInvalid(): boolean {
-    return this.fromTimeInput.errors && this.fromTimeInput.errors.dateValidator && (this.fromTimeInput.dirty || this.fromTimeInput.touched);
-  }
-
-  get toTimeInvalid(): boolean {
-    return this.toTimeInput.errors && this.toTimeInput.errors.dateValidator && (this.toTimeInput.dirty || this.toTimeInput.touched);
-  }
-
   get showPaginationIndex(): boolean {
     return this.totalRecordCount > 0;
   }
@@ -125,30 +119,13 @@ export class AuditLogComponent implements OnInit {
     this.retrieve();
   }
 
-  convertDate(strDate: string): string {
+doSearchByStartTime(fromTimestamp: string): void {
-    if (/^(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)\d\d$/.test(strDate)) {
+    this.queryParam.begin_timestamp = fromTimestamp;
-      let parts = strDate.split(/[-\/]/);
-      strDate = parts[2] /*Year*/ + '-' + parts[1] /*Month*/ + '-' + parts[0] /*Date*/;
-    }
-    return strDate;
-  }
-
-  doSearchByStartTime(strDate: string): void {
-    this.queryParam.begin_timestamp = 0;
-    if (this.fromTimeInput.valid && strDate) {
-      strDate = this.convertDate(strDate);
-      this.queryParam.begin_timestamp = new Date(strDate).getTime() / 1000;
-    }
     this.retrieve();
   }
 
-  doSearchByEndTime(strDate: string): void {
+  doSearchByEndTime(toTimestamp: string): void {
-    this.queryParam.end_timestamp = 0;
+    this.queryParam.end_timestamp = toTimestamp;
-    if (this.toTimeInput.valid && strDate) {
-      strDate = this.convertDate(strDate);
-      let oneDayOffset = 3600 * 24;
-      this.queryParam.end_timestamp = new Date(strDate).getTime() / 1000 + oneDayOffset;
-    }
     this.retrieve();
   }