1 files changed, 77 insertions, 0 deletions
diff --git a/webapp/src/app/pages/monitoring/monitoring-config.component.html b/webapp/src/app/pages/monitoring/monitoring-config.component.html
new file mode 100644
index 0000000..ed76dd0
--- /dev/null
+++ b/webapp/src/app/pages/monitoring/monitoring-config.component.html
@@ -0,0 +1,77 @@
+<div class="row col-md-12">
+  <div class="col-md-2" style="display: inherit;">
+    <h3 style="margin-top: auto; margin-bottom: auto">Configuration</h3>
+  </div>
+  <div class="col-md-1">
+    <nb-card-body>
+      <div class="col-md-9">
+        <nb-actions size="small">
+          <nb-action>
+            <button id="refresh-topo" (click)="getAGLTopo()">
+              <i class="fa fa-refresh"></i>
+            </button>
+          </nb-action>
+        </nb-actions>
+      </div>
+    </nb-card-body>
+  </div>
+
+  <div class="col-md-8" style="text-align: right;">
+    <label>Monitoring actions</label>
+    <button id="start-trace" class="btn btn-primary" (click)="onStartTrace()" [disabled]="
+        isStartBtnDisable()">{{ starting ?"Starting... ":"Start" }}
+      <span *ngIf="starting" class="fa fa-gear faa-spin animated fa-size-x2"></span>
+    </button>
+
+    <button id="stop-trace" class="btn btn-primary" (click)="onStopTrace()" [disabled]="
+      isStopBtnDisable()">{{ stopping ?"Stopping... ":"Stop" }}
+      <span *ngIf="stopping" class="fa fa-gear faa-spin animated fa-size-x2"></span>
+    </button>
+
+    <button id="show-graph" class="btn btn-primary" (click)="showGraph()">
+      Show Graph
+    </button>
+  </div>
+</div>
+<div class="row col-md-12">
+  <table class="table table-striped" style="color:black;">
+    <tbody>
+      <tr>
+        <th>Name</th>
+        <th style="width: 6rem;">Pid</th>
+        <th>WS Clients</th>
+        <th>WS Servers</th>
+        <th style="width: 6rem;">Monitor</th>
+      </tr>
+      <ng-container *ngIf="aglTopoInit; else loading">
+        <ng-container *ngIf="daemonCheckboxes?.length; else noItems">
+          <tr *ngFor="let tp of daemonCheckboxes">
+            <td *ngFor="let col of ['name', 'pid', 'ws_clients', 'ws_servers']">
+              {{tp.topo[col]}}
+            </td>
+            <td style="text-align: center;">
+              <ng-container *ngIf="!tp.topo.disabled else disableTopo">
+                <nb-checkbox indeterminate [(ngModel)]="tp.value"></nb-checkbox>
+              </ng-container>
+              <ng-template #disableTopo>
+                <span style="font-size: smaller; color: grey; font-style: italic;">DISABLED
+                </span>
+              </ng-template>
+            </td>
+          </tr>
+        </ng-container>
+        <ng-template #noItems>No Items!</ng-template>
+        <ng-template #loading>loading...</ng-template>
+      </ng-container>
+      <ng-template #loading>loading...</ng-template>
+    </tbody>
+  </table>
+</div>
+
+<div class="row col-md-6" style="display: inherit;">
+  <h3 style="margin-top: auto; margin-bottom: auto">AGL Bindings Topology</h3>
+</div>
+<div class="row col-md-12" style="">
+  <svg id="graph" width="100%" height="800">
+  </svg>
+</div>