Schedules

+ Add Schedule List
+ Add Schedule Details
+ Add support for multiple-schedules per each Task
+ Integrate Scheduling workflows in Task List

Resolve #810, #811, #812, #813

Author: oodamien

ui/package.json

@@ -31,6 +31,7 @@
     "@angular/platform-browser": "5.2.9",
     "@angular/platform-browser-dynamic": "5.2.9",
     "@angular/router": "5.2.9",
+    "angular-2-local-storage": "2.0.0",
     "core-js": "2.5.3",
     "rxjs": "5.5.7",
     "zone.js": "0.8.20",

ui/src/app/about/components/about-more/about-details.component.html

@@ -41,6 +41,15 @@ <h2>Enabled Features</h2>
             <span class="fa fa-close"></span>
           </strong>
         </div>
+        <div class="line">
+          <span>Schedules:</span>
+          <strong *ngIf="dataflowVersionInfo.featureInfo.schedulerEnabled" id="schedulerEnabled">
+            <span class="fa fa-check"></span>
+          </strong>
+          <strong *ngIf="!dataflowVersionInfo.featureInfo.schedulerEnabled" id="schedulerDisabled">
+            <span class="fa fa-close"></span>
+          </strong>
+        </div>
         <div class="line">
           <span>Skipper Mode:</span>
           <strong *ngIf="dataflowVersionInfo.featureInfo.skipperEnabled" id="skipperEnabled">

ui/src/app/about/components/about-more/about-details.component.spec.ts

@@ -5,7 +5,6 @@ import { MockActivatedRoute } from '../../../tests/mocks/activated-route';
 import { ActivatedRoute } from '@angular/router';
 import { MockAboutService } from '../../../tests/mocks/about';
 import { AboutService } from '../../about.service';
-import { DebugElement } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AboutDetailsComponent } from './about-details.component';
@@ -59,8 +58,8 @@ describe('AboutDetailsComponent', () => {
     expect(component).toBeTruthy();
 
     // Verify Enabled Features
-    validateColumnValues('enabledFeaturesTable', ['Analytics', 'Streams', 'Tasks', 'Skipper Mode'], 0);
-    validateSpansExists(['analyticsEnabled', 'streamsEnabled', 'tasksEnabled', 'skipperEnabled']);
+    validateColumnValues('enabledFeaturesTable', ['Analytics', 'Streams', 'Tasks', 'Schedules', 'Skipper Mode'], 0);
+    validateSpansExists(['analyticsEnabled', 'streamsEnabled', 'tasksEnabled', 'schedulerEnabled', 'skipperEnabled']);
 
     // Verify Security Information
     validateColumnValues('securityInformationTable', ['Authentication', 'Authorization',
@@ -106,8 +105,8 @@ describe('AboutDetailsComponent', () => {
     expect(component).toBeTruthy();
 
     // Verify Enabled Features
-    validateColumnValues('enabledFeaturesTable', ['Analytics', 'Streams', 'Tasks', 'Skipper Mode'], 0);
-    validateSpansExists(['analyticsDisabled', 'streamsDisabled', 'tasksDisabled', 'skipperDisabled']);
+    validateColumnValues('enabledFeaturesTable', ['Analytics', 'Streams', 'Tasks', 'Schedules', 'Skipper Mode'], 0);
+    validateSpansExists(['analyticsDisabled', 'streamsDisabled', 'tasksDisabled', 'schedulerDisabled', 'skipperDisabled']);
 
     // Verify Security Information
     validateColumnValues('securityInformationTable', ['Authentication', 'Authorization',

ui/src/app/apps/apps/apps.component.html

@@ -164,7 +164,7 @@ <h1>Apps</h1>
     </div>
     <div class="col-xs-12" *ngIf="appRegistrations && appRegistrations?.totalElements > 0">
       <app-pager [page]="params.page" [total]="appRegistrations.totalElements" [size]="params.size"
-       (onSizeChange)="changeSize($event)">
+                 (sizeChange)="changeSize($event)">
       </app-pager>
     </div>
   </div>

ui/src/app/jobs/jobs/jobs.component.html

@@ -79,7 +79,7 @@ <h1>Batch Job Executions</h1>
     </div>
     <div class="col-xs-12" *ngIf="jobExecutions && jobExecutions?.totalElements > 0">
       <app-pager [page]="params.page" [total]="jobExecutions.totalElements" [size]="params.size"
-                 (onSizeChange)="changeSize($event)">
+                 (sizeChange)="changeSize($event)">
       </app-pager>
     </div>
   </div>

ui/src/app/runtime/runtime-apps/runtime-apps.component.html

@@ -72,7 +72,7 @@ <h1>Runtime applications</h1>
       </div>
       <div class="col-xs-12" *ngIf="runtimeApps && runtimeApps?.totalElements > 0">
         <app-pager [page]="pagination.page" [total]="runtimeApps.totalElements" [size]="pagination.size"
-                   (onSizeChange)="changeSize($event)">
+                   (sizeChange)="changeSize($event)">
         </app-pager>
       </div>
     </div>

ui/src/app/shared/components/pager/pager.component.ts

@@ -22,7 +22,7 @@ import {
         </button>
         <ul class="dropdown-menu dropdown-menu-up" id="dropdown-basic" *dropdownMenu>
           <li *ngFor="let s of SIZE_LIST" [class.active]="s === size">
-            <a (click)="sizeChange(s)" class="dropdown-item">{{ s }}</a>
+            <a (click)="doSizeChange(s)" class="dropdown-item">{{ s }}</a>
           </li>
         </ul>
       </div>
@@ -44,7 +44,7 @@ export class PagerComponent implements OnChanges {
 
   @Input() size: number;
 
-  @Output() onSizeChange = new EventEmitter<number>();
+  @Output() sizeChange = new EventEmitter<number>();
 
   values = {
     from: 0,
@@ -76,8 +76,8 @@ export class PagerComponent implements OnChanges {
     }
   }
 
-  sizeChange(size) {
-    this.onSizeChange.emit(size);
+  doSizeChange(size) {
+    this.sizeChange.emit(size);
   }
 
 }

ui/src/app/shared/components/timepicker/styles.scss

@@ -0,0 +1,95 @@
+import { Component, forwardRef, ViewChild } from '@angular/core';
+import { NG_VALUE_ACCESSOR, FormControl } from '@angular/forms';
+import * as moment from 'moment';
+import { TimepickerValidator } from './timepicker.validator';
+
+export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => TimepickerComponent),
+  multi: true
+};
+
+@Component({
+  selector: 'app-dataflow-timepicker',
+  styleUrls: ['./styles.scss'],
+  template: `
+    <div class="form-control-timepicker">
+      <input placeholder="HH:MM:SS" [(ngModel)]="value" [popover]="popTemplate" [outsideClick]="true" placement="bottom"
+             containerClass="popover-timepicker" class="form-control input-sm input-time" #pop="bs-popover"
+             (onShown)="onShown()">
+      <span (click)="show()" class="timepicker-icon fa fa-clock-o"></span>
+      <ng-template #popTemplate>
+        <timepicker [(ngModel)]="currentValue" showSeconds="true" [showMeridian]="false" [hourStep]="1" [minuteStep]="1"
+                    [secondsStep]="1" (ngModelChange)="changedCurrentValue()"></timepicker>
+      </ng-template>
+    </div>
+  `,
+  providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
+})
+export class TimepickerComponent {
+
+  @ViewChild('pop') popover;
+
+  private valueProp: any = '';
+
+  private currentValue;
+
+  private isNull = true;
+
+  get value(): any {
+    return this.valueProp;
+  }
+
+  set value(val: any) {
+    if (val !== this.valueProp) {
+      this.valueProp = val;
+    }
+  }
+
+  show() {
+    this.popover.show();
+  }
+
+  onShown() {
+    let setDefault = false;
+    this.isNull = !(this.value && this.value.toString() !== '');
+    if (!this.isNull) {
+      if (TimepickerValidator.time(new FormControl(this.value))) {
+        setDefault = true;
+        this.isNull = true;
+      } else {
+        this.currentValue = moment(this.value, 'HH:mm:ss')
+          .toDate();
+      }
+    } else {
+      setDefault = true;
+    }
+
+    if (setDefault) {
+      this.currentValue = moment(new Date())
+        .hours(12)
+        .minutes(0)
+        .seconds(0)
+        .toDate();
+    }
+  }
+
+  writeValue(value: any) {
+    this.valueProp = value;
+  }
+
+  changedCurrentValue() {
+    if (this.currentValue) {
+      const date = moment(this.currentValue);
+      const val = `${date.format('HH')}:${date.format('mm')}:${date.format('ss')}`;
+      if (this.isNull && val === '12:00:00') {
+        this.writeValue(null);
+      } else {
+        this.writeValue(val);
+      }
+    } else {
+      this.writeValue(null);
+    }
+  }
+
+}

ui/src/app/shared/components/timepicker/timepicker.component.ts

@@ -0,0 +1,33 @@
+import { FormControl } from '@angular/forms';
+
+/**
+ * Validators for Timepicker Component
+ * Static methods
+ *
+ * @author Damien Vitrac
+ */
+export class TimepickerValidator {
+
+  /**
+   * Uri time
+   */
+  static uriTimeRegex = /^(?:(?:([01]?\d|2[0-3]):)([0-5]?\d):)([0-5]?\d)$/;
+
+
+  /**
+   * Validate the name conditions: no space, 2 characters min, no specials characters
+   *
+   * @param {FormControl} formControl
+   * @returns {any}
+   */
+  static time(formControl: FormControl): any {
+    if (!formControl.value) {
+      return null;
+    }
+    if (!TimepickerValidator.uriTimeRegex.test(formControl.value)) {
+      return { invalid: true };
+    }
+    return null;
+  }
+
+}