Added target and terminal support in Dashboard

[src/xds/xds-agent.git] / webapp / src / app / pages / targets / terminals / terminals.component.ts

diff --git a/webapp/src/app/pages/targets/terminals/terminals.component.ts b/webapp/src/app/pages/targets/terminals/terminals.component.ts
new file mode 100644 (file)
index 0000000..306c759
--- /dev/null
+++ b/webapp/src/app/pages/targets/terminals/terminals.component.ts
@@ -0,0 +1,115 @@
+/**
+* @license
+* Copyright (C) 2017-2018 "IoT.bzh"
+* Author Sebastien Douheret <sebastien@iot.bzh>
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import { Subject } from 'rxjs/Subject';
+import { Subscription } from 'rxjs/Subscription';
+
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+
+import { TargetService, TargetType, ITarget, ITerminal, TerminalType, ITerminalOutput } from '../../../@core-xds/services/target.service';
+import { AlertService } from '../../../@core-xds/services/alert.service';
+
+@Component({
+  selector: 'xds-terminals',
+  styleUrls: ['./terminals.component.scss'],
+  templateUrl: './terminals.component.html',
+})
+export class TerminalsComponent implements OnInit {
+
+  public curTarget: ITarget;
+  public xTermStdout: string;
+  public xTermDisable: boolean;
+
+  protected curTermID: string;
+
+  private termOut$: Subject<ITerminalOutput>;
+  private termSubs: Subscription;
+
+  constructor(
+    private modalService: NgbModal,
+    private targetSvr: TargetService,
+    private alert: AlertService,
+  ) {
+    this.xTermStdout = '';
+    this.xTermDisable = true;
+    this.curTarget = null;
+    this.curTermID = '';
+  }
+
+  ngOnInit() {
+    this.targetSvr.curTarget$.subscribe(p => this.curTarget = p);
+  }
+
+  openTerm() {
+    if (this.curTarget == null || this.curTarget.id === '') {
+      return;
+    }
+
+    // FIXME: don't always use 1st terminal
+    if (this.curTarget.terms.length > 0) {
+      this.curTermID = this.curTarget.terms[0].id;
+    }
+
+    this.targetSvr.terminalOpen(this.curTarget.id, this.curTermID)
+      .subscribe(
+        res => {
+          this.termOut$ = this.targetSvr.terminalOutput$;
+
+          this.termSubs = this.termOut$.subscribe(termOut => {
+            this.xTermStdout = termOut.stdout + termOut.stderr;
+          });
+
+          this.xTermDisable = false;
+        },
+        err => {
+          this.alert.error(err);
+        },
+    );
+  }
+
+  closeTerm() {
+    if (this.curTarget == null || this.curTarget.id === '' || this.curTermID === '') {
+      return;
+    }
+    this.targetSvr.terminalClose(this.curTarget.id, this.curTermID)
+      .subscribe(res => {
+        this.curTermID = '';
+        this.xTermStdout = '\r\n*** Terminal closed ***\n\n\r';
+        if (this.termSubs !== undefined) {
+          this.termSubs.unsubscribe();
+          this.termOut$ = undefined;
+        }
+        this.xTermDisable = true;
+      });
+  }
+
+  onXTermData(data: string) {
+    if (this.termOut$ !== undefined && !this.termOut$.closed) {
+      this.targetSvr.terminalWrite(data);
+    }
+  }
+
+  onResize(sz) {
+    if (this.termOut$ !== undefined && !this.termOut$.closed) {
+      this.targetSvr.terminalResize(this.curTarget.id, this.curTermID, sz.cols, sz.rows).subscribe();
+    }
+  }
+
+}