bootstrap 5 (#132)

* bootstrap 5

* bootstrap 5, UI updates

Author: wardviaene

webapp/angular.json

@@ -17,6 +17,7 @@
             "index": "src/index.html",
             "tsConfig": "src/tsconfig.app.json",
             "polyfills": [
+              "@angular/localize/init",
               "src/polyfills.ts"
             ],
             "assets": [

webapp/package-lock.json

@@ -29,7 +29,7 @@
     "@ng-bootstrap/ng-bootstrap": "^17.0.0",
     "@schematics/angular": "^8.3.29",
     "awesome-bootstrap-checkbox": "^1.0.1",
-    "bootstrap": "^4.4.1",
+    "bootstrap": "^5.0.0",
     "core-js": "^2.6.11",
     "font-awesome": "^4.7.0",
     "html-webpack-plugin": "^4.5.2",

webapp/package.json

@@ -5,10 +5,10 @@
   </button>
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
-       <a class="nav-link" [routerLink]="['/services']">Services</a>
+       <a class="nav-link top-link" [routerLink]="['/services']">Services</a>
      </li>
      <li class="nav-item active">
-       <a class="nav-link" [routerLink]="['/deployments']">Deployments</a>
+       <a class="nav-link top-link" [routerLink]="['/deployments']">Deployments</a>
      </li>
    </ul>
 </nav>

webapp/src/app/app-navbar/app-navbar.component.html

@@ -24,9 +24,9 @@ <h2>Deployments</h2>
           <tr *ngFor="let deployment of deployments">
             <td>{{deployment.Date}}</td>
             <td>{{deployment.ServiceName}}</td>
-            <td *ngIf="deployment.Status == 'success'"><span class="badge badge-success">{{deployment.Status}}</span></td>
-            <td *ngIf="deployment.Status == 'failed'"><span class="badge badge-danger">{{deployment.Status}}</span></td>
-            <td *ngIf="deployment.Status == 'aborted'"><span class="badge badge-info">{{deployment.Status}}</span></td>
+            <td *ngIf="deployment.Status == 'success'"><span class="badge rounded-pill bg-success">{{deployment.Status}}</span></td>
+            <td *ngIf="deployment.Status == 'failed'"><span class="badge rounded-pill bg-danger">{{deployment.Status}}</span></td>
+            <td *ngIf="deployment.Status == 'aborted'"><span class="badge rounded-pill bg-info">{{deployment.Status}}</span></td>
             <td *ngIf="deployment.Status == ''"></td>
             <td>{{deployment.TaskDefinitionVersion}}</td>
           </tr>

webapp/src/app/deployment-list/deployment-list.component.html

@@ -14,7 +14,7 @@ import { DeploymentList, DeploymentListService }  from './deployment-list.servic
 export class DeploymentListComponent implements OnInit {
   services: string[] = [];
   deployments: string[] = [];
-  filterActive: boolean = false
+  filterList: string[] = [];
 
   constructor(
     private route: ActivatedRoute,
@@ -27,43 +27,29 @@ export class DeploymentListComponent implements OnInit {
       .subscribe((data: { dl: DeploymentList }) => {
         this.deployments = data.dl.deployments;
         this.services = data.dl.services;
+        this.filterList = []
      });
   }
 
   filter(event: any, serviceName: string) {
-    console.log("Filter: " + serviceName + ": " + event.target.checked)
     if(event.target.checked) {
-      this.ds.getDeploymentList(serviceName).subscribe((data: DeploymentList ) => {
-        if(data.deployments.length != 0) {
-          if(this.filterActive) {
-            // merge if filter is active
-            this.deployments = [ ...this.deployments, ...data.deployments];
-          } else {
-            this.deployments = data.deployments
-          }
-          this.deployments.sort(function(a,b) {return (a["Time"] > b["Time"]) ? -1 : ((b["Time"] > a["Time"]) ? 1 : 0);} ); 
-          this.filterActive = true
-        }
-      });
+      this.filterList.push(serviceName)
     } else {
-      var newDeployments = [];
-      for (let deployment of this.deployments) {
-        if(deployment["ServiceName"] != serviceName) {
-          newDeployments.push(deployment)
-        }
-      }
-      if(newDeployments.length != this.deployments.length) {
-        this.deployments = newDeployments
-      }
-      if(newDeployments.length == 0) {
-        this.filterActive = false
-        this.ds.getDeploymentList("").subscribe((data: DeploymentList ) => {
-          if(data.deployments.length != 0) {
-            this.deployments = data.deployments
+      this.filterList = this.filterList.filter(a => a !== serviceName)
+    }
+
+    this.ds.getDeploymentList(serviceName).subscribe((data: DeploymentList ) => {
+      if(data.deployments.length != 0) {
+        this.deployments = data.deployments.filter((deployment) => {
+          if (this.filterList.length === 0) { return true }
+          for (var i = 0; i < this.filterList.length; i++) {
+            if(this.filterList[i] == deployment["ServiceName"]) {
+              return true
+            }
           }
-        });
+          return false
+        })
       }
-    }
+    });
   }
-
 }

webapp/src/app/deployment-list/deployment-list.component.ts

@@ -32,13 +32,7 @@ export class DeploymentListService {
   }
 
   getDeployments(serviceName: string) {
-    var url
-    if(serviceName == "") {
-      url = "/ecs-deploy/api/v1/deploy/list"
-    } else {
-      url = "/ecs-deploy/api/v1/deploy/list/" + serviceName
-    }
-    this.http.get(url, {headers: new HttpHeaders().set('Authorization', "Bearer " + this.auth.getToken())})
+    this.http.get("/ecs-deploy/api/v1/deploy/list", {headers: new HttpHeaders().set('Authorization', "Bearer " + this.auth.getToken())})
       .subscribe(data => {
       // Read the result field from the JSON response.
       this.dl.deployments = data["deployments"]
@@ -52,7 +46,7 @@ export class DeploymentListService {
           this.dl.deployments[i]["TaskDefinitionVersion"] = s[1]
         }
       }
-      this.dl.deployments.sort(function(a,b) {return (a["Time"] > b["Time"]) ? -1 : ((b["Time"] > a["Time"]) ? 1 : 0);} ); 
+      this.dl.deployments.sort(function(a,b) {return (a["Time"] > b["Time"]) ? -1 : ((b["Time"] > a["Time"]) ? 1 : 0);} );
       if(this.dl.services.length > 0) {
         this.dl$.next(this.dl)
         this.dl$.complete()
@@ -66,6 +60,7 @@ export class DeploymentListService {
     this.http.get('/ecs-deploy/api/v1/service/list', {headers: new HttpHeaders().set('Authorization', "Bearer " + this.auth.getToken())}).subscribe(data => {
       // Read the result field from the JSON response.
       this.dl.services = data['services'];
+      this.dl.services.sort(function(a,b) {return (a["S"] < b["S"]) ? -1 : ((b["S"] < a["S"]) ? 1 : 0);} );
       if(this.dl.deployments == null) {
         return
       }

webapp/src/app/deployment-list/deployment-list.service.ts

@@ -1,9 +1,7 @@
 <ng-template #inspect let-c="close" let-d="dismiss">
   <div class="modal-header">
     <h4 class="modal-title">{{serviceName}}</h4>
-    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
-      <span aria-hidden="true">&times;</span>
-    </button>
+    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" (click)="d('Cross click')"></button>
   </div>
   <div class="modal-body">
     <span *ngIf="loading" class="sr-only">Loading...</span>
@@ -70,6 +68,6 @@ <h5>Container info</h5>
     </div>
   </div>
   <div class="modal-footer">
-    <button type="button" class="btn btn-outline-dark" (click)="c('Close click')">Close</button>
+    <button type="button" class="btn btn-dark" (click)="c('Close click')">Close</button>
   </div>
 </ng-template>

webapp/src/app/service-detail/inspect.component.html

@@ -49,4 +49,44 @@ h1 {
 
 ngb-modal-backdrop {
   z-index: 1050 !important;
+}
+
+/* fix bootstrap 4 -> 5 form groups */
+
+.form-group {
+  margin-bottom: 1rem;
+}
+
+.form-inline .form-control {
+  display: inline-block;
+  width: auto;
+  vertical-align: middle;
+}
+
+.form-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: -5px;
+  margin-left: -5px;
+}
+
+.form-row > .col {
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+label {
+  margin-bottom: 0.5rem;
+}
+
+/* navbar fixes */
+nav.navbar {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+.nav-link {
+  cursor: pointer
+}
+.top-link {
+  color:#FFFFFF;
 }