Added webapp Dashboard + logic to interact with server.

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

diff --git a/webapp/src/app/config/config.component.html b/webapp/src/app/config/config.component.html
new file mode 100644 (file)
index 0000000..4dbd238
--- /dev/null
+++ b/webapp/src/app/config/config.component.html
@@ -0,0 +1,101 @@
+<div class="panel panel-default">
+    <div class="panel-heading">
+        <h2 class="panel-title" (click)="gConfigIsCollapsed = !gConfigIsCollapsed">
+            Global Configuration
+            <div class="pull-right">
+                <span class="fa fa-fw fa-exchange fa-size-x2" [style.color]="((agentStatus$ | async)?.WS_connected)?'green':'red'"></span>
+
+                <button class="btn btn-link" (click)="gConfigIsCollapsed = !gConfigIsCollapsed; $event.stopPropagation()">
+                    <span class="fa fa-big" [ngClass]="{'fa-angle-double-down': gConfigIsCollapsed, 'fa-angle-double-right': !gConfigIsCollapsed}"></span>
+                </button>
+            </div>
+        </h2>
+    </div>
+    <div class="panel-body" [collapse]="gConfigIsCollapsed && xdsServerConnected">
+        <div class="row">
+            <div class="col-xs-12">
+                <table class="table table-condensed">
+                    <tbody>
+                        <tr [ngClass]="{'info': xdsServerConnected, 'danger': !xdsServerConnected}">
+                            <th><label>XDS Server URL</label></th>
+                            <td> <input type="text" [(ngModel)]="xdsServerUrl"></td>
+                            <td style="white-space: nowrap">
+                                <div class="btn-group">
+                                    <button class="btn btn-link" (click)="xdsAgentRestartConn()"><span class="fa fa-refresh fa-size-x2"></span></button>
+                                    <dl-xds-agent class="button"></dl-xds-agent>
+                                </div>
+                            </td>
+                        </tr>
+                        <tr class="info">
+                            <th><label>XDS Server connection retry</label></th>
+                            <td> <input type="text" [(ngModel)]="xdsServerRetry" (ngModelChange)="showApplyBtn['retry'] = true"></td>
+                            <td>
+                                <button *ngIf="showApplyBtn['retry']" class="btn btn-primary btn-xs" (click)="submitGlobConf('retry')">APPLY</button>
+                            </td>
+                        </tr>
+                        <tr class="info">
+                            <th><label>Local Projects root directory</label></th>
+                            <td> <input type="text" [(ngModel)]="projectsRootDir" (ngModelChange)="showApplyBtn['rootDir'] = true"></td>
+                            <td>
+                                <button *ngIf="showApplyBtn['rootDir']" class="btn btn-primary btn-xs" (click)="submitGlobConf('rootDir')">APPLY</button>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="panel panel-default">
+    <div class="panel-heading">
+        <h2 class="panel-title" (click)="sdksIsCollapsed = !sdksIsCollapsed">
+            Cross SDKs
+            <div class="pull-right">
+                <button class="btn btn-link" (click)="childSdkModal.show(); $event.stopPropagation()"><span class="fa fa-plus fa-size-x2"></span></button>
+
+                <button class="btn btn-link" (click)="sdksIsCollapsed = !sdksIsCollapsed; $event.stopPropagation()">
+                    <span class="fa fa-big" [ngClass]="{'fa-angle-double-down': sdksIsCollapsed, 'fa-angle-double-right': !sdksIsCollapsed}"></span>
+                </button>
+            </div>
+        </h2>
+    </div>
+    <div class="panel-body" [collapse]="sdksIsCollapsed">
+        <div class="row col-xs-12">
+            <sdks-list-accordion [sdks]="(sdks$ | async)"></sdks-list-accordion>
+        </div>
+    </div>
+</div>
+
+<div class="panel panel-default">
+    <div class="panel-heading">
+        <h2 class="panel-title" (click)="projectsIsCollapsed = !projectsIsCollapsed; $event.stopPropagation()">
+            Projects
+            <div class="pull-right">
+                <button class="btn btn-link" (click)="childProjectModal.show(); $event.stopPropagation()"><span class="fa fa-plus fa-size-x2"></span></button>
+
+                <button class="btn btn-link" (click)="projectsIsCollapsed = !projectsIsCollapsed; $event.stopPropagation()">
+                       <span class="fa fa-big" [ngClass]="{'fa-angle-double-down': projectsIsCollapsed, 'fa-angle-double-right': !projectsIsCollapsed}"></span>
+                </button>
+            </div>
+        </h2>
+    </div>
+    <div class="panel-body" [collapse]="projectsIsCollapsed">
+        <div class="row col-xs-12">
+            <projects-list-accordion [projects]="(projects$ | async)"></projects-list-accordion>
+        </div>
+    </div>
+</div>
+
+<!-- Modals -->
+<project-add-modal #childProjectModal [title]="'Add a new project'" [server-id]=curServerID>
+</project-add-modal>
+<sdk-add-modal  #childSdkModal [title]="'Add a new SDK'">
+</sdk-add-modal>
+
+<!-- only for debug -->
+<div *ngIf="false" class="row">
+    <pre>Config: {{config$ | async | json}}</pre>
+    <br>
+    <pre>Projects: {{projects$ | async | json}} </pre>
+</div>