tables and new API with IColumn and IRow

common/utils/websrv/frontend/src/app/api/commands.api.ts

@@ -33,8 +33,16 @@ export interface ILog {
     enabled: boolean;
 }
 
-export interface ILog2 {
-    enabled: boolean;
+export interface IColumn { //should use IVariable ?
+    name: string;
+    type: IArgType;
+    modifiable: boolean; //set command ?
+}
+
+export type IRow = string[]
+export interface ITable {
+    columns: IColumn[];
+    rows: IRow[];
 }
 
 export interface IResp {

common/utils/websrv/frontend/src/app/components/commands/commands.component.html

@@ -49,4 +49,61 @@
     </div>
   </div>
 
+
+  <mat-table mat-table [dataSource]="logs$" multiTemplateDataRows class="mat-elevation-z8">
+
+    <!-- For anyone who has set the multiTemplateDataRows property of mat-table to true,
+              you can't use index. Instead you have use either dataIndex or renderIndex.
+              See https://github.com/angular/material2/issues/12793 -->
+
+
+    <div matColumnDef="component">
+      <mat-header-cell *matHeaderCellDef> Component
+      </mat-header-cell>
+      <mat-cell *matCellDef="let log">
+        <div fxLayout="row" fxLayoutAlign="start end">
+          <p>{{log.component}}</p>
+        </div>
+      </mat-cell>
+    </div>
+
+
+    <div matColumnDef="level">
+      <mat-header-cell *matHeaderCellDef> Level
+      </mat-header-cell>
+      <mat-cell *matCellDef="let log">
+        <div fxLayout="row" fxLayoutAlign="start end">
+          <p>{{log.level}}</p>
+        </div>
+      </mat-cell>
+    </div>
+
+
+    <div matColumnDef="output">
+      <mat-header-cell *matHeaderCellDef> Output
+      </mat-header-cell>
+      <mat-cell *matCellDef="let log">
+        <div fxLayout="row" fxLayoutAlign="start end">
+          <p>{{log.output}}</p>
+        </div>
+      </mat-cell>
+    </div>
+
+
+    <div matColumnDef="enabled">
+      <mat-header-cell *matHeaderCellDef> Enabled
+      </mat-header-cell>
+      <mat-cell *matCellDef="let log">
+        <div fxLayout="row" fxLayoutAlign="start end">
+          <p>{{log.enabled}}</p>
+        </div>
+      </mat-cell>
+    </div>
+
+    <mat-header-row *matHeaderRowDef="DISPLAYED_COLUMNS"></mat-header-row>
+    <mat-row *matRowDef="let stageCtrl; columns: DISPLAYED_COLUMNS"></mat-row>
+
+
+  </mat-table>
+
 </div>
\ No newline at end of file

common/utils/websrv/frontend/src/app/components/commands/commands.component.ts

 import { Component } from '@angular/core';
 import { Observable } from 'rxjs/internal/Observable';
 import { map } from 'rxjs/internal/operators/map';
-import { CommandsApi, IArgType } from 'src/app/api/commands.api';
+import { tap, mergeMap } from 'rxjs/operators';
+import { CommandsApi, IArgType, ILog } from 'src/app/api/commands.api';
 import { CmdCtrl } from 'src/app/controls/cmd.control';
 import { VarCtrl } from 'src/app/controls/var.control';
 import { DialogService } from 'src/app/services/dialog.service';
@@ -30,6 +31,16 @@ export class CommandsComponent {
   args$?: Observable<VarCtrl[]>
   // selectedArg?: VarCtrl
 
+  //table columns
+  DISPLAYED_COLUMNS = [
+    'component',
+    'level',
+    'output',
+    'enabled'
+  ]
+
+  logs$: Observable<ILog[]> = new Observable<ILog[]>()
+
   constructor(
     public commandsApi: CommandsApi,
     public loadingService: LoadingService,
@@ -45,6 +56,7 @@ export class CommandsComponent {
     );
   }
 
+
   onModuleSelect(control: CmdCtrl) {
 
     this.selectedModule = control
@@ -80,9 +92,10 @@ export class CommandsComponent {
   }
 
   onCmdSubmit(control: CmdCtrl) {
-    this.commandsApi.runCommand$(control.api(), `${this.selectedModule!.nameFC.value}`).pipe(
-      map(resp => this.success('runCommand ' + control.nameFC.value + ' OK', resp.display!.join("</p><p>")))
-    ).subscribe();
+    this.logs$ = this.commandsApi.runCommand$(control.api(), `${this.selectedModule!.nameFC.value}`).pipe(
+      tap(resp => this.success('runCommand ' + control.nameFC.value + ' OK', resp.display!.join("</p><p>"))),
+      map(iresp => iresp.logs!)
+    );
   }
 
   private success = (mess: string, str: string) => this.dialogService.openDialog({

common/utils/websrv/frontend/src/environments/environment.ts

@@ -4,7 +4,8 @@
 
 export const environment = {
   production: false,
-  backend: 'http://10.130.163.206:8090'
+  backend: 'http://10.133.10.152:8090'
+  // backend: 'http://10.130.163.206:8090'
 };
 
 /*