Improved and fixed connection to XDS Server

[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
index 31559e2..ebfaa36 100644 (file)
--- a/webapp/src/app/pages/config/config-xds/config-xds.component.html
+++ b/webapp/src/app/pages/config/config-xds/config-xds.component.html
@@ -7,28 +7,30 @@
           <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">
+              <input type="url" class="form-control" [ngClass]="{ 'form-control-danger': !server?.connected }" id="inputServerUrl" [(ngModel)]="xdsServerUrl" name="serverUrl" (ngModelChange)="configFormChanged=true" [disabled]="applying">
             </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>
+              <span class="fa fa-fw fa-exchange faa-burst fa-size-x2 vcenter" [ngClass]="{'animated': applying}" [style.color]="(server?.connected && !animated)?'green':'red'" ></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">
+            <div class="col-sm-8" *ngIf="server">
               <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-footer>
+        <div class="col-12">
+          <div class="offset-sm-5 col-sm-2">
+            <button class="btn btn-primary" (click)="onSubmit()" [disabled]="
+            applying || (server?.connected && !configFormChanged)">{{ applying ?"Applying... ":"Apply" }}
+            <span *ngIf="applying" class="fa fa-gear faa-spin animated fa-size-x2"></span>
+          </button>
+          </div>
+        </div>
+      </nb-card-footer>
     </nb-card>
   </div>
 </div>