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;
+  }
+
+}

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

@@ -5,17 +5,16 @@ import { LoggerService } from '../../services/logger.service';
  * Contains meta data about the supported features.
  *
  * @author Gunnar Hillert
+ * @author Damien Vitrac
  */
 export class FeatureInfo implements Serializable<FeatureInfo> {
 
   public analyticsEnabled = false;
   public streamsEnabled = false;
   public tasksEnabled = false;
   public skipperEnabled = false;
+  public schedulerEnabled = false;
 
-  constructor() {
-
-  }
 
   /**
    * Set the FeatureInfo object to default values.
@@ -25,13 +24,15 @@ export class FeatureInfo implements Serializable<FeatureInfo> {
     this.streamsEnabled = false;
     this.tasksEnabled = false;
     this.skipperEnabled = false;
+    this.schedulerEnabled = false;
   }
 
   public deserialize(input) {
     this.analyticsEnabled = input.analyticsEnabled;
     this.streamsEnabled = input.streamsEnabled;
     this.tasksEnabled = input.tasksEnabled;
     this.skipperEnabled = input.skipperEnabled;
+    this.schedulerEnabled = input.schedulerEnabled;
     return this;
   }
 
@@ -56,6 +57,9 @@ export class FeatureInfo implements Serializable<FeatureInfo> {
         case 'skipperEnabled': {
           return this.skipperEnabled;
         }
+        case 'schedulerEnabled': {
+          return this.schedulerEnabled;
+        }
         default: {
           LoggerService.error(`Unsupported feature parameter '${feature}'.`);
           return false;

ui/src/app/shared/model/about/feature-info.model.ts

@@ -0,0 +1,39 @@
+import { Injectable } from '@angular/core';
+import { LocalStorageService } from 'angular-2-local-storage';
+
+/**
+ * A service for global logs.
+ *
+ * @author Damien Vitrac
+ */
+@Injectable()
+export class GroupRouteService {
+
+  constructor(private localStorageService: LocalStorageService) {
+  }
+
+  create(args): string {
+    const key = `group-${'xxxxx-xxxxx-xxxxx-xxxxx'.replace(/[xy]/g, function (c) {
+      const r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
+      return v.toString(16);
+    })}`;
+    this.localStorageService.set(key, args);
+    return key;
+  }
+
+  isSimilar(str: string): boolean {
+    str = str || '';
+    if (!str.startsWith('group-')) {
+      return false;
+    }
+    if (str.length !== 29 || str[11] !== '-' || str[17] !== '-' || str[23] !== '-') {
+      return false;
+    }
+    return true;
+  }
+
+  group(name) {
+    return this.localStorageService.get(name);
+  }
+
+}

ui/src/app/shared/services/group-route.service.ts

@@ -45,6 +45,10 @@ import { RoutingStateService } from './services/routing-state.service';
 import { ToastContainerModule, ToastrModule } from 'ngx-toastr';
 import { NotificationService } from './services/notification.service';
 import { LoggerService } from './services/logger.service';
+import { GroupRouteService } from './services/group-route.service';
+import { LocalStorageModule } from 'angular-2-local-storage';
+import { TimepickerComponent } from './components/timepicker/timepicker.component';
+import { PopoverModule, TimepickerModule } from 'ngx-bootstrap';
 
 const busyConfig: BusyConfig = {
   message: 'Processing..',
@@ -72,6 +76,8 @@ const busyConfig: BusyConfig = {
     ModalModule.forRoot(),
     TooltipModule.forRoot(),
     BsDropdownModule.forRoot(),
+    PopoverModule.forRoot(),
+    TimepickerModule.forRoot(),
     NgxPaginationModule,
     ToastContainerModule,
     ProgressbarModule.forRoot(),
@@ -82,6 +88,10 @@ const busyConfig: BusyConfig = {
       maxOpened: 6,
       enableHtml: true
     }),
+    LocalStorageModule.withConfig({
+      prefix: 'dataflow-',
+      storageType: 'localStorage'
+    })
   ],
   declarations: [
     CapitalizePipe,
@@ -110,7 +120,8 @@ const busyConfig: BusyConfig = {
     OrderByPipe,
     ConfirmComponent,
     LoaderComponent,
-    PagerComponent
+    PagerComponent,
+    TimepickerComponent
   ],
   entryComponents: [
     ConfirmComponent
@@ -124,7 +135,8 @@ const busyConfig: BusyConfig = {
     BusyService,
     RoutingStateService,
     NotificationService,
-    LoggerService
+    LoggerService,
+    GroupRouteService
   ],
   exports: [
     StreamDslComponent,
@@ -158,7 +170,8 @@ const busyConfig: BusyConfig = {
     AutoResizeDirective,
     LoaderComponent,
     PagerComponent,
-    ToastContainerModule
+    ToastContainerModule,
+    TimepickerComponent
   ]
 })
 export class SharedModule {

ui/src/app/shared/shared.module.ts

@@ -293,7 +293,7 @@ export class StreamDeployBuilderComponent implements OnInit, OnDestroy {
           // Error: app not found
           builder.errors.global.push(line);
         } else {
-          const app = this.refBuilder.streamDeployConfig.apps.find((app: any) => app.name === appKey);
+          const app = this.refBuilder.streamDeployConfig.apps.find((app_: any) => app_.name === appKey);
           // Populate if it's not the default version
           if (!app || app.version !== value) {
             builder.formGroup.get('appsVersion').get(appKey).setValue(value);