frontend-tutorial-framework/src/app/dashboard/dashboard.component.ts

// Copyright (C) 2018 Avatao.com Innovative Learning Kft.
// All Rights Reserved. See LICENSE file for details.

import { Component, OnDestroy, OnInit, ChangeDetectorRef, ElementRef, ViewChild } from '@angular/core';
import { DeploymentNotificationService } from '../services/deployment-notification.service';
import { Subscription } from 'rxjs';
import { WebSocketService } from '../services/websocket.service';
import { HideMessagesCommand, LayoutCommand, TerminalMenuItemCommand } from '../message.types/dashboard.commands';
import { config } from '../config';
import { ProcessLogService } from '../services/processlog.service';
import { LogMessage } from '../message.types/log.message';
import { CommandMessage } from '../message.types/command.message';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit, OnDestroy {
  deploying = false;
  deploymentNotificationSubscription: Subscription;
  layout: string = config.dashboard.currentLayout;
  hide_messages: boolean = config.dashboard.hide_messages;
  iframeUrl: string = config.dashboard.iframeUrl;
  @ViewChild('webiframe') webiframe: ElementRef;
  selectedTerminalMenuItem = config.dashboard.terminalOrConsole;

  command_handlers = {'layout':             this.layoutHandler.bind(this),
                      'hide_messages':      this.hideMessagesHandler.bind(this),
                      'terminal_menu_item': this.terminalMenuSelectHandler.bind(this),
                      'reload_frontend':    this.reloadFrontendHandlder.bind(this)};

  constructor(private deploymentNotificationService: DeploymentNotificationService,
              private webSocketService: WebSocketService,
              private changeDetectorRef: ChangeDetectorRef,
              private processLogService: ProcessLogService) {}

  ngOnInit() {
    this.webSocketService.connect();
    this.initCommandHandling();
    this.initDeploymentNotifications();
    this.triggerFirstFSMStepIfNeeded();
  }

  initCommandHandling() {
    this.webSocketService.observeKey<CommandMessage>('dashboard').subscribe((event) => {
      this.command_handlers[event.data.command](event.data);
      this.changeDetectorRef.detectChanges();
    });
  }

  initDeploymentNotifications() {
    this.deploymentNotificationSubscription = this.deploymentNotificationService.deploying.subscribe(
      (deploying) => {
        this.deploying = deploying;
        if (!deploying && config.ide.reloadIframeOnDeploy) {
          this.reloadIframe();
        }
      });
  }

  triggerFirstFSMStepIfNeeded() {
    if (config.dashboard.triggerFirstFSMStep) {
      setTimeout(() => {
        this.webSocketService.sendJSON({
          'key': '',
          'trigger': config.dashboard.triggerFirstFSMStep
        });
      });
    }
  }

  layoutHandler(data: LayoutCommand) {
    if (config.dashboard.enabledLayouts.includes(data.value)) {
      this.setLayout(data.value);
    } else {
      console.log('Invalid ide layout "' + data.value + '" received!');
    }
  }

  hideMessagesHandler(data: HideMessagesCommand) {
    this.hide_messages = data.value;
  }

  terminalMenuSelectHandler(data: TerminalMenuItemCommand) {
    this.selectTerminalMenuItem(data.value);
  }

  reloadFrontendHandlder(data: CommandMessage) {
    setTimeout(() => window.location.reload(), 2000);
  }

  setLayout(layout: string) {
    this.layout = layout;
    // We need to trigger a 'resize' event manually, otherwise ace editor stays collapsed
    // Ace editors 'resize' event listener requires a parameter of force=true
    setTimeout(() => window.dispatchEvent(new Event('resize', {force: true} as any)), 0);
  }

  ngOnDestroy() {
    if (this.deploymentNotificationSubscription) {
      this.deploymentNotificationSubscription.unsubscribe();
    }
  }

  reloadIframe() {
    setTimeout(() => {
      this.webiframe.nativeElement.contentWindow.location.reload(true);
    });
  }

  selectTerminalMenuItem(item: string) {
    if (!item.match('(terminal|console)')) {
      return;
    }
    this.selectedTerminalMenuItem = item;
  }

  setConsoleContentIfNoLiveLogs(logs: LogMessage) {
    this.processLogService.emitNewLogsIfNoLiveLogs(logs);
    if (config.ide.showConsoleOnDeploy) {
      this.selectTerminalMenuItem('console');
    }
  }
}