New dashboard look & feel

[src/xds/xds-agent.git] / webapp / src / app / pages / config / config-xds / config-xds.component.html

diff --git a/webapp/src/app/pages/config/config-xds/config-xds.component.html b/webapp/src/app/pages/config/config-xds/config-xds.component.html
new file mode 100644 (file)
index 0000000..31559e2
--- /dev/null
+++ b/webapp/src/app/pages/config/config-xds/config-xds.component.html
@@ -0,0 +1,34 @@
+<div class="row">
+  <div class="col-md-12">
+    <nb-card>
+      <nb-card-header>XDS Server Configuration</nb-card-header>
+      <nb-card-body>
+        <form (ngSubmit)="onSubmit()" #ConfigXdsForm="ngForm">
+          <div class="form-group row">
+            <label class="col-sm-3 col-form-label">XDS Server URL</label>
+            <div class="col-sm-8">
+              <input type="url" class="form-control" [ngClass]="{ 'form-control-danger': !server.connected }" id="inputServerUrl" [(ngModel)]="xdsServerUrl" name="serverUrl" (ngModelChange)="configFormChanged=true" [disabled]="connecting">
+            </div>
+            <div class="col-sm-1">
+              <span *ngIf="!connecting" class="fa fa-fw fa-exchange fa-size-x2 vcenter" [style.color]="server.connected?'green':'red'"></span>
+              <span *ngIf="connecting" class="fa fa-gear faa-spin animated fa-size-x2 vcenter"></span>
+            </div>
+          </div>
+          <div class="form-group row">
+            <label class="col-sm-3 col-form-label">XDS Server connection retry</label>
+            <div class="col-sm-8">
+              <input type="number" class="form-control" id="inputServerConnRetry" [(ngModel)]="server.connRetry" name="serverRetry" (ngModelChange)="configFormChanged=true">
+            </div>
+          </div>
+
+          <div class="form-group row">
+            <div class="offset-sm-3 col-sm-9">
+              <button type="submit" class="btn btn-primary" [disabled]="
+              connecting || (server.connected && !configFormChanged)">Apply</button>
+            </div>
+          </div>
+        </form>
+      </nb-card-body>
+    </nb-card>
+  </div>
+</div>