webapp/src/app/pages/monitoring/monitoring-config.component.html

   1 <div class="row col-md-12">
   2   <div class="col-md-2" style="display: inherit;">
   3     <h3 style="margin-top: auto; margin-bottom: auto">Configuration</h3>
   4   </div>
   5   <div class="col-md-1">
   6     <nb-card-body>
   7       <div class="col-md-9">
   8         <nb-actions size="small">
   9           <nb-action>
  10             <button id="refresh-topo" (click)="getAGLTopo()">
  11               <i class="fa fa-refresh"></i>
  12             </button>
  13           </nb-action>
  14         </nb-actions>
  15       </div>
  16     </nb-card-body>
  17   </div>
  18
  19   <div class="col-md-8" style="text-align: right;">
  20     <label>Monitoring actions</label>
  21     <button id="start-trace" class="btn btn-primary" (click)="onStartTrace()" [disabled]="
  22         isStartBtnDisable()">{{ starting ?"Starting... ":"Start" }}
  23       <span *ngIf="starting" class="fa fa-gear faa-spin animated fa-size-x2"></span>
  24     </button>
  25
  26     <button id="stop-trace" class="btn btn-primary" (click)="onStopTrace()" [disabled]="
  27       isStopBtnDisable()">{{ stopping ?"Stopping... ":"Stop" }}
  28       <span *ngIf="stopping" class="fa fa-gear faa-spin animated fa-size-x2"></span>
  29     </button>
  30
  31     <button id="show-graph" class="btn btn-primary" (click)="showGraph()">
  32       Show Graph
  33     </button>
  34   </div>
  35 </div>
  36 <div class="row col-md-12">
  37   <table class="table table-striped" style="color:black;">
  38     <tbody>
  39       <tr>
  40         <th>Name</th>
  41         <th style="width: 6rem;">Pid</th>
  42         <th>WS Clients</th>
  43         <th>WS Servers</th>
  44         <th style="width: 6rem;">Monitor</th>
  45       </tr>
  46       <ng-container *ngIf="aglTopoInit; else loading">
  47         <ng-container *ngIf="daemonCheckboxes?.length; else noItems">
  48           <tr *ngFor="let tp of daemonCheckboxes">
  49             <td *ngFor="let col of ['name', 'pid', 'ws_clients', 'ws_servers']">
  50               {{tp.topo[col]}}
  51             </td>
  52             <td style="text-align: center;">
  53               <ng-container *ngIf="!tp.topo.disabled else disableTopo">
  54                 <nb-checkbox indeterminate [(ngModel)]="tp.value"></nb-checkbox>
  55               </ng-container>
  56               <ng-template #disableTopo>
  57                 <span style="font-size: smaller; color: grey; font-style: italic;">DISABLED
  58                 </span>
  59               </ng-template>
  60             </td>
  61           </tr>
  62         </ng-container>
  63         <ng-template #noItems>No Items!</ng-template>
  64         <ng-template #loading>loading...</ng-template>
  65       </ng-container>
  66       <ng-template #loading>loading...</ng-template>
  67     </tbody>
  68   </table>
  69 </div>
  70
  71 <div class="row col-md-6" style="display: inherit;">
  72   <h3 style="margin-top: auto; margin-bottom: auto">AGL Bindings Topology</h3>
  73 </div>
  74 <div class="row col-md-12" style="">
  75   <svg id="graph" width="100%" height="800">
  76   </svg>
  77 </div>