feat(vm-logs): realtime logs (#1358)

* feat(vm-logs): VM logs plugin (#1330) * vm logs mock * vm logs * feat(vm-logs): show vm logs * vm logs * add tests * fix action name * fix selector name * fix monospace text in column header * feat(vm-logs): replace show logs icon button with text button * feat(vm-logs): keyword filtering * feat(vm-logs): save vm log keywords in query params * feat(vm-logs): filter by dates * feat(vm-logs): filter by dates * v1.10.1 * fix tests * fix version * fix package.json * sort by timestamp * fix timestamp * feat(vm-logs): filter vms by account * refactor date picker label * refactor labels * refactor labels * fix IE * feat(vm-logs): newest first (#1346) * vm logs mock * vm logs * feat(vm-logs): show vm logs * vm logs * add tests * fix action name * fix selector name * fix monospace text in column header * feat(vm-logs): replace show logs icon button with text button * feat(vm-logs): keyword filtering * feat(vm-logs): save vm log keywords in query params * feat(vm-logs): filter by dates * feat(vm-logs): filter by dates * v1.10.1 * fix tests * fix version * fix package.json * sort by timestamp * fix timestamp * feat(vm-logs): filter vms by account * refactor date picker label * refactor labels * refactor labels * fix IE * feat(vm-logs): newest first sorting * add types * add types * fix newest first * fix typings * fix typings * fix typings * feat(vm-logs): log files (#1351) * feat(vm-logs): log files * feat(vm-logs): log files * code style * feat(vm-logs): realtime logs * feat(vm-logs): disable auto update on show logs click * VM logs (#1362) * refactor(vm): get rid of BaseModel for VM model (#1180) PR close #1104 * build(code-coverage): enable source-maps by default (#1347) This is a workaround to fix code coverage mapping * Update README.md * Create version * Update README.md * Update README.md * feat(navigation): rework navigation menu (#1333) PR close #1235 * feat(config-validation): add config validators (#1309) * feat(config-validation): add config validators * revert security group template interface * add more validation * remove allowReorderingSidenav validation, use uniqueItems * Update vm-colors.scheme.json * style: update app code style (#1359) * Add prettier * Prettier formatted * Work in progress * Fix tsc errors and lint errors * Ann few more rules and changes to codebase * Add precommit hook * Run prettier on entire codebase * Run prettier * Fix lint error * fix bug about grouping * Fix bugs * Remove unused files * fix(misc): semantic errors * fix(lint) * Vm logs (#1363) * refactor(vm): get rid of BaseModel for VM model (#1180) PR close #1104 * build(code-coverage): enable source-maps by default (#1347) This is a workaround to fix code coverage mapping * Update README.md * Create version * Update README.md * Update README.md * feat(navigation): rework navigation menu (#1333) PR close #1235 * feat(config-validation): add config validators (#1309) * feat(config-validation): add config validators * revert security group template interface * add more validation * remove allowReorderingSidenav validation, use uniqueItems * Update vm-colors.scheme.json * style: update app code style (#1359) * Add prettier * Prettier formatted * Work in progress * Fix tsc errors and lint errors * Ann few more rules and changes to codebase * Add precommit hook * Run prettier on entire codebase * Run prettier * Fix lint error * fix bug about grouping * Fix bugs * Remove unused files * fix(misc): semantic errors * fix(lint) * update to master * vm logs * vm logs * simplify nav menu reducer * Update virtual-machines-subroutes.ts * Update accounts-subroutes.ts * nav menu * fix current route is not defined * remove view logs from context menu * fix event emitter names * feat(vm-logs): disable date and time pickers in autoupdate mode
bwsw · Nov 2, 2018 · ff0f5aa · ff0f5aa
1 parent 980adba
commit ff0f5aa
Show file tree

Hide file tree

Showing 23 changed files with 492 additions and 35 deletions.
diff --git a/src/app/shared/components/date-picker/date-picker.component.html b/src/app/shared/components/date-picker/date-picker.component.html
@@ -2,6 +2,7 @@
   <mat-form-field cs-input-group-textbox>
     <input
       matInput
+      [disabled]="disabled"
       [(ngModel)]="displayDate"
       [placeholder]="label"
       (focus)="onFocus($event)"
@@ -10,6 +11,7 @@
   <button
     mat-icon-button
     cs-input-group-button
+    [disabled]="disabled"
     (click)="onFocus($event)"
   >
     <mat-icon class="mdi-calendar-range"></mat-icon>

diff --git a/src/app/shared/components/date-picker/date-picker.component.ts b/src/app/shared/components/date-picker/date-picker.component.ts
@@ -49,6 +49,8 @@ export class DatePickerComponent implements ControlValueAccessor, OnChanges {
   public dateTimeFormat = DateTimeFormat;
   @Input()
   public locale = Language.en;
+  @Input()
+  public disabled = false;
   @Output()
   public changed = new EventEmitter();
 

diff --git a/src/app/shared/components/day-period/day-period.component.html b/src/app/shared/components/day-period/day-period.component.html
@@ -1,5 +1,9 @@
 <mat-form-field *ngIf="periods">
-  <mat-select name="period" [(ngModel)]="period">
+  <mat-select
+    name="period"
+    [disabled]="disabled"
+    [(ngModel)]="period"
+  >
     <mat-option *ngFor="let p of periods" [value]="p.value">
       {{ p.name | translate }}
     </mat-option>

diff --git a/src/app/shared/components/time-picker/time-picker.component.html b/src/app/shared/components/time-picker/time-picker.component.html
@@ -3,6 +3,7 @@
     matInput
     name="hour"
     type="number"
+    [disabled]="disabled"
     [min]="minHourValue"
     [max]="maxHourValue"
     [csMinValue]="minHourValue"
@@ -21,6 +22,7 @@
     matInput
     name="minute"
     type="number"
+    [disabled]="disabled"
     [min]="minMinuteValue"
     [max]="maxMinuteValue"
     [csMinValue]="minMinuteValue"

diff --git a/src/app/shared/components/time-picker/time-picker.component.ts b/src/app/shared/components/time-picker/time-picker.component.ts
@@ -29,6 +29,8 @@ export class TimePickerComponent implements ControlValueAccessor, OnInit {
   public label = '';
   @Input()
   public timeFormat: TimeFormat;
+  @Input()
+  public disabled: boolean;
   @ViewChild('hourField')
   public hourField: MatInput;
   @ViewChild('minuteField')

diff --git a/src/app/shared/services/utils/utils.service.ts b/src/app/shared/services/utils/utils.service.ts
@@ -1,6 +1,11 @@
-import { RouterState } from '@angular/router';
 import * as uuid from 'uuid';
 
+interface RouterState {
+  snapshot: {
+    url: string;
+  };
+}
+
 export class Utils {
   public static defaultPrecision = 0;
 

diff --git a/src/app/vm-logs/containers/vm-logs-filter.container.ts b/src/app/vm-logs/containers/vm-logs-filter.container.ts
@@ -20,6 +20,7 @@ import * as accountActions from '../../reducers/accounts/redux/accounts.actions'
 import { combineLatest } from 'rxjs';
 import moment = require('moment');
 import { selectFilteredVMs } from '../redux/selectors/filtered-vms.selector';
+import * as fromVmLogsAutoUpdate from '../redux/vm-logs-auto-update.reducers';
 
 const FILTER_KEY = 'logsFilters';
 
@@ -40,6 +41,7 @@ const FILTER_KEY = 'logsFilters';
       [endDate]="endDate$ | async | csDateObjectToDate"
       [endTime]="endTime$ | async"
       [newestFirst]="newestFirst$ | async"
+      [isAutoUpdateEnabled]="isAutoUpdateEnabled$ | async"
       [firstDayOfWeek]="firstDayOfWeek$ | async"
       (accountsChanged)="onAccountsChange($event)"
       (vmChanged)="onVmChange($event)"
@@ -70,6 +72,9 @@ export class VmLogsFilterContainerComponent extends WithUnsubscribe()
   readonly newestFirst$ = this.store.pipe(select(fromVmLogs.filterNewestFirst));
   readonly selectedLogFile$ = this.store.pipe(select(fromVmLogs.filterSelectedLogFile));
   readonly logFiles$ = this.store.pipe(select(fromVmLogFiles.selectAll));
+  readonly isAutoUpdateEnabled$ = this.store.pipe(
+    select(fromVmLogsAutoUpdate.selectIsAutoUpdateEnabled),
+  );
 
   private filterService = new FilterService(
     {
@@ -187,7 +192,9 @@ export class VmLogsFilterContainerComponent extends WithUnsubscribe()
       newestFirst,
     } = this.filterService.getParams();
 
-    this.store.dispatch(new vmLogActions.VmLogsUpdateVmId(vm));
+    if (vm) {
+      this.store.dispatch(new vmLogActions.VmLogsUpdateVmId(vm));
+    }
 
     const wrappedKeywords = (keywords || []).map(text => ({ text }));
     this.store.dispatch(new vmLogActions.VmLogsUpdateKeywords(wrappedKeywords));

diff --git a/src/app/vm-logs/containers/vm-logs.container.ts b/src/app/vm-logs/containers/vm-logs.container.ts
@@ -0,0 +1,38 @@
+import { Component } from '@angular/core';
+import { select, Store } from '@ngrx/store';
+import { State } from '../../reducers';
+import * as fromVmLogsAutoUpdate from '../redux/vm-logs-auto-update.reducers';
+import * as fromVmLogsVm from '../redux/vm-logs-vm.reducers';
+import * as vmLogsActions from '../redux/vm-logs.actions';
+import { debounceTime } from 'rxjs/internal/operators';
+
+@Component({
+  selector: 'cs-vm-logs-container',
+  template: `
+    <cs-vm-logs
+      [isAutoUpdateEnabled]="isAutoUpdateEnabled$ | async"
+      [selectedVmId]="selectedVmId$ | async"
+      (autoUpdateStarted)="onAutoUpdate()"
+      (autoUpdateStopped)="onAutoUpdateStop()"
+    ></cs-vm-logs>
+  `,
+})
+export class VmLogsContainerComponent {
+  readonly isAutoUpdateEnabled$ = this.store.pipe(
+    select(fromVmLogsAutoUpdate.selectIsAutoUpdateEnabled),
+  );
+  readonly selectedVmId$ = this.store.pipe(
+    select(fromVmLogsVm.filterSelectedVmId),
+    debounceTime(0),
+  );
+
+  constructor(private store: Store<State>) {}
+
+  public onAutoUpdate() {
+    this.store.dispatch(new vmLogsActions.EnableAutoUpdate());
+  }
+
+  public onAutoUpdateStop() {
+    this.store.dispatch(new vmLogsActions.DisableAutoUpdate());
+  }
+}
diff --git a/src/app/vm-logs/redux/selectors/load-auto-update-vm-logs-request-params.selector.ts b/src/app/vm-logs/redux/selectors/load-auto-update-vm-logs-request-params.selector.ts
@@ -0,0 +1,38 @@
+import { createSelector } from '@ngrx/store';
+import { filterSelectedVmId } from '../vm-logs-vm.reducers';
+import { LoadVmLogsRequestParams } from '../../models/load-vm-logs-request-params';
+import { filterKeywords, filterNewestFirst, filterSelectedLogFile } from '../vm-logs.reducers';
+import * as pickBy from 'lodash/pickBy';
+import { selectStartDate, selectEndDate } from '../vm-logs-auto-update.reducers';
+import moment = require('moment');
+
+export const loadAutoUpdateVmLogsRequestParams = createSelector(
+  filterSelectedVmId,
+  filterKeywords,
+  selectStartDate,
+  selectEndDate,
+  filterSelectedLogFile,
+  filterNewestFirst,
+  (id, keywords, startDate, endDate, logFile, newestFirst): LoadVmLogsRequestParams => {
+    const fields = {
+      id,
+      logFile,
+      keywords: keywords.map(keyword => keyword.text).join(','),
+      startDate:
+        (startDate &&
+          moment(startDate)
+            .toISOString()
+            .slice(0, -1)) ||
+        null,
+      endDate:
+        (endDate &&
+          moment(endDate)
+            .toISOString()
+            .slice(0, -1)) ||
+        null,
+      sort: newestFirst ? '-timestamp' : 'timestamp',
+    };
+
+    return pickBy(fields, Boolean);
+  },
+);
diff --git a/src/app/vm-logs/redux/vm-logs-auto-update-reducers.spec.ts b/src/app/vm-logs/redux/vm-logs-auto-update-reducers.spec.ts
@@ -0,0 +1,76 @@
+import { VmLogsActionTypes } from './vm-logs.actions';
+import { initialState, reducer } from './vm-logs-auto-update.reducers';
+
+describe('VM logs auto update reducer', () => {
+  it('should enable auto update', () => {
+    const state = reducer(
+      {
+        ...initialState,
+        isAutoUpdateEnabled: false,
+      },
+      {
+        type: VmLogsActionTypes.ENABLE_AUTO_UPDATE,
+      },
+    );
+
+    expect(state).toEqual({
+      ...initialState,
+      isAutoUpdateEnabled: true,
+    });
+  });
+
+  it('should disable auto update', () => {
+    const state = reducer(
+      {
+        ...initialState,
+        isAutoUpdateEnabled: true,
+      },
+      {
+        type: VmLogsActionTypes.DISABLE_AUTO_UPDATE,
+      },
+    );
+
+    expect(state).toEqual({
+      ...initialState,
+      isAutoUpdateEnabled: false,
+    });
+  });
+
+  const getDateObject = () => ({
+    years: 0,
+    months: 0,
+    date: 0,
+    hours: 0,
+    minutes: 0,
+    seconds: 0,
+    milliseconds: 0,
+  });
+
+  it('should set start date', () => {
+    const startDate = getDateObject();
+
+    const state = reducer(undefined, {
+      type: VmLogsActionTypes.SET_AUTO_UPDATE_START_DATE,
+      payload: startDate,
+    });
+
+    expect(state).toEqual({
+      ...initialState,
+      startDate,
+    });
+  });
+
+  it('should set end date', () => {
+    const endDate = getDateObject();
+
+    const state = reducer(undefined, {
+      type: VmLogsActionTypes.SET_AUTO_UPDATE_END_DATE,
+      payload: endDate,
+    });
+
+    expect(state).toEqual({
+      ...initialState,
+      endDate,
+    });
+  });
+});
diff --git a/src/app/vm-logs/redux/vm-logs-auto-update.reducers.ts b/src/app/vm-logs/redux/vm-logs-auto-update.reducers.ts
@@ -0,0 +1,73 @@
+import { createFeatureSelector, createSelector } from '@ngrx/store';
+import * as vmLogsActions from './vm-logs.actions';
+import { DateObject } from '../models/date-object.model';
+
+
+export interface State {
+  isAutoUpdateEnabled: boolean,
+  startDate: DateObject,
+  endDate: DateObject,
+}
+
+export const initialState: State = {
+  isAutoUpdateEnabled: false,
+  startDate: null,
+  endDate: null,
+};
+
+export function reducer(
+  state = initialState,
+  action: vmLogsActions.Actions
+): State {
+  switch (action.type) {
+    case vmLogsActions.VmLogsActionTypes.ENABLE_AUTO_UPDATE: {
+      return {
+        ...state,
+        isAutoUpdateEnabled: true,
+      };
+    }
+
+    case vmLogsActions.VmLogsActionTypes.DISABLE_AUTO_UPDATE: {
+      return {
+        ...state,
+        isAutoUpdateEnabled: false,
+      };
+    }
+
+    case vmLogsActions.VmLogsActionTypes.SET_AUTO_UPDATE_START_DATE: {
+      return {
+        ...state,
+        startDate: action.payload,
+      };
+    }
+
+    case vmLogsActions.VmLogsActionTypes.SET_AUTO_UPDATE_END_DATE: {
+      return {
+        ...state,
+        endDate: action.payload,
+      };
+    }
+
+    default: {
+      return state;
+    }
+  }
+}
+
+
+export const getVmLogsAutoUpdateState = createFeatureSelector<State>('vmLogsAutoUpdate');
+
+export const selectIsAutoUpdateEnabled = createSelector(
+  getVmLogsAutoUpdateState,
+  state => state.isAutoUpdateEnabled
+);
+
+export const selectStartDate = createSelector(
+  getVmLogsAutoUpdateState,
+  state => state.startDate
+);
+
+export const selectEndDate = createSelector(
+  getVmLogsAutoUpdateState,
+  state => state.endDate
+);