2018-04-20 09:09:47 +00:00
|
|
|
import { Component, OnDestroy, OnInit, ChangeDetectorRef } from '@angular/core';
|
2018-03-14 15:50:37 +00:00
|
|
|
import { DeploymentNotificationService } from '../services/deployment-notification.service';
|
|
|
|
import { Subscription } from 'rxjs/Subscription';
|
2018-03-20 14:52:40 +00:00
|
|
|
import { WebSocketService } from '../services/websocket.service';
|
|
|
|
import { LayoutCommand } from './layout-command';
|
2018-03-21 15:32:56 +00:00
|
|
|
import { config } from '../config';
|
2018-04-20 07:29:16 +00:00
|
|
|
import { SidebarComponent } from '../sidebar/sidebar.component';
|
2018-02-16 10:19:52 +00:00
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'app-dashboard',
|
|
|
|
templateUrl: './dashboard.component.html',
|
|
|
|
styleUrls: ['./dashboard.component.scss']
|
|
|
|
})
|
2018-04-20 09:09:47 +00:00
|
|
|
export class DashboardComponent implements OnInit, OnDestroy {
|
2018-03-12 14:03:38 +00:00
|
|
|
deploying = false;
|
|
|
|
deploymentNotificationSubscription: Subscription;
|
2018-04-20 09:09:47 +00:00
|
|
|
layout: string = config.dashboard.currentLayout;
|
2018-04-20 12:05:23 +00:00
|
|
|
hide_messages: boolean = config.dashboard.hide_messages;
|
2018-04-25 09:48:15 +00:00
|
|
|
iframeUrl: string = config.dashboard.iframeUrl;
|
2018-04-20 12:50:43 +00:00
|
|
|
command_handlers = {'layout': this.layoutHandler.bind(this),
|
|
|
|
'reload_frontend': this.reloadFrontendHandlder.bind(this)};
|
2018-03-12 14:03:38 +00:00
|
|
|
|
2018-03-20 14:52:40 +00:00
|
|
|
constructor(private deploymentNotificationService: DeploymentNotificationService,
|
|
|
|
private webSocketService: WebSocketService,
|
|
|
|
private changeDetectorRef: ChangeDetectorRef) {}
|
2018-03-12 14:03:38 +00:00
|
|
|
|
|
|
|
ngOnInit() {
|
2018-03-20 14:52:40 +00:00
|
|
|
this.webSocketService.connect();
|
|
|
|
this.webSocketService.observeKey<LayoutCommand>('dashboard').subscribe((event) => {
|
|
|
|
this.command_handlers[event.data.command](event.data);
|
|
|
|
this.changeDetectorRef.detectChanges();
|
|
|
|
});
|
2018-03-12 14:03:38 +00:00
|
|
|
this.deploymentNotificationSubscription = this.deploymentNotificationService.deploying.subscribe(
|
|
|
|
(deploying) => this.deploying = deploying
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2018-03-20 14:52:40 +00:00
|
|
|
layoutHandler(data: LayoutCommand) {
|
2018-04-20 12:10:57 +00:00
|
|
|
if (config.dashboard.enabledLayouts.includes(data.layout)) {
|
2018-04-20 09:09:47 +00:00
|
|
|
this.setLayout(data.layout);
|
2018-04-20 12:36:06 +00:00
|
|
|
} else {
|
2018-04-20 07:21:20 +00:00
|
|
|
console.log('Invalid ide layout "' + data.layout + '" received!');
|
2018-03-20 14:52:40 +00:00
|
|
|
}
|
2018-04-20 12:36:06 +00:00
|
|
|
if (data.hide_messages != undefined) {
|
|
|
|
this.hide_messages = data.hide_messages;
|
|
|
|
}
|
2018-03-20 14:52:40 +00:00
|
|
|
}
|
|
|
|
|
2018-04-20 12:50:43 +00:00
|
|
|
reloadFrontendHandlder(data: LayoutCommand) {
|
|
|
|
setTimeout(() => window.location.reload(), 2000);
|
|
|
|
}
|
|
|
|
|
2018-04-20 09:09:47 +00:00
|
|
|
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);
|
|
|
|
}
|
|
|
|
|
2018-03-12 14:03:38 +00:00
|
|
|
ngOnDestroy() {
|
|
|
|
if (this.deploymentNotificationSubscription) {
|
|
|
|
this.deploymentNotificationSubscription.unsubscribe();
|
|
|
|
}
|
|
|
|
}
|
2018-02-16 10:19:52 +00:00
|
|
|
}
|