Improvement in Dialogs

ligreman · Oct 22, 2022 · 6b5efca · 6b5efca
1 parent cda1538
commit 6b5efca
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 19 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -11,6 +11,7 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatExpansionModule } from '@angular/material/expansion';
+import { MatGridListModule } from '@angular/material/grid-list';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatListModule } from '@angular/material/list';
@@ -180,7 +181,8 @@ export function HttpLoaderFactory(http: HttpClient) {
             'countDuplicates': true,
             'progressBar': true,
             'positionClass': 'toast-bottom-right'
-        })
+        }),
+        MatGridListModule
     ],
     providers: [
         {

diff --git a/src/app/components/dialog-info-acl/dialog-info-acl.component.html b/src/app/components/dialog-info-acl/dialog-info-acl.component.html
@@ -49,18 +49,31 @@ <h2 class="margin-bottom-5-i" fxFlex fxLayout="row" fxLayoutAlign="space-between
             </div>
 
             <div fxLayout="row">
-                <div>
-                    <mat-list>
-                        <mat-list-item *ngFor="let acl of acls">
+                <div fxFlex>
+                    <!-- <mat-list>
+                         <mat-list-item *ngFor="let acl of acls">
+                             <mat-icon mat-list-icon>people</mat-icon>
+                             <div mat-line matTooltip="ID: {{acl.id}}" matTooltipClass="tooltip-teal">{{acl.group}}</div>
+                             <div class="text-small" mat-line>{{ (acl.created_at * 1000) | date:'medium'}}</div>
+                             <button (click)="deleteAcl(acl)" class="margin-left-20-i" color="warn" mat-button mat-icon-button
+                                     matTooltip="{{'text.delete' | translate}}" matTooltipClass="tooltip-teal">
+                                 <mat-icon>delete</mat-icon>
+                             </button>
+                         </mat-list-item>
+                     </mat-list>-->
+                    <mat-grid-list cols="2" rowHeight="2em">
+                        <mat-grid-tile *ngFor="let acl of acls" class="custom">
+                            <mat-icon color="accent" mat-list-icon matTooltip="{{ (acl.created_at * 1000) | date:'medium'}}" matTooltipClass="tooltip-teal">
+                                event
+                            </mat-icon>
                             <mat-icon mat-list-icon>people</mat-icon>
-                            <div mat-line matTooltip="ID: {{acl.id}}" matTooltipClass="tooltip-teal">{{acl.group}}</div>
-                            <div class="text-small" mat-line>{{ (acl.created_at * 1000) | date:'medium'}}</div>
+                            <div matTooltip="ID: {{acl.id}}" matTooltipClass="tooltip-teal">{{acl.group}}</div>
                             <button (click)="deleteAcl(acl)" class="margin-left-20-i" color="warn" mat-button mat-icon-button
-                                    matTooltip="{{'text.delete' | translate}}" matTooltipClass="tooltip-teal">
+                                    matTooltip="{{'text.delete' | translate}}" matTooltipClass="tooltip-teal" matTooltipPosition="right">
                                 <mat-icon>delete</mat-icon>
                             </button>
-                        </mat-list-item>
-                    </mat-list>
+                        </mat-grid-tile>
+                    </mat-grid-list>
                 </div>
             </div>
         </mat-dialog-content>

diff --git a/src/app/components/dialog-info-acl/dialog-info-acl.component.scss b/src/app/components/dialog-info-acl/dialog-info-acl.component.scss
@@ -0,0 +1,3 @@
+mat-grid-tile mat-icon, mat-grid-tile div {
+    margin-right: 10px;
+}
diff --git a/src/app/components/dialog-info-upstream/dialog-info-upstream.component.html b/src/app/components/dialog-info-upstream/dialog-info-upstream.component.html
@@ -281,7 +281,14 @@ <h2 class="margin-bottom-5-i" fxFlex fxLayout="row" fxLayoutAlign="space-between
                 </div>
             </div>
 
-            <p class="margin-top-20-i margin-bottom-5-i padding-left-20">{{'upstream.dialog.health_passive' | translate}}</p>
+            <!--<p class="margin-top-20-i margin-bottom-5-i padding-left-20">{{'upstream.dialog.health_passive' | translate}}</p>-->
+            <p class="margin-top-20-i margin-bottom-5-i padding-left-20" fxLayout="row" fxLayoutAlign="space-between center">
+                <span>{{'upstream.dialog.health_passive' | translate}}</span>
+                <span *ngIf="upstream?.healthchecks?.passive?.healthy?.successes > 0 || upstream?.healthchecks?.passive?.unhealthy?.http_failures > 0 || upstream?.healthchecks?.passive?.unhealthy?.tcp_failures > 0 || upstream?.healthchecks?.passive?.unhealthy?.timeouts > 0"
+                      class="accent">{{'upstream.health_active_on' | translate}}</span>
+                <span *ngIf="upstream?.healthchecks?.passive?.healthy?.successes === 0 && upstream?.healthchecks?.passive?.unhealthy?.http_failures === 0 && upstream?.healthchecks?.passive?.unhealthy?.tcp_failures === 0 && upstream?.healthchecks?.passive?.unhealthy?.timeouts === 0"
+                      class="warn">{{'upstream.health_active_off' | translate}}</span>
+            </p>
             <mat-divider class="margin-bottom-10-i"></mat-divider>
             <div class="padding-left-40" fxLayout="row">
                 <div fxFlex="25">

diff --git a/src/app/components/dialog-new-rsu/dialog-new-rsu.component.ts b/src/app/components/dialog-new-rsu/dialog-new-rsu.component.ts
@@ -4,7 +4,7 @@ import { AbstractControl, FormBuilder, ValidationErrors, ValidatorFn, Validators
 import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MatChipInputEvent } from '@angular/material/chips';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { isEmpty as _isEmpty, max as _max, min as _min, sortedUniq as _sortedUniq } from 'lodash';
+import { max as _max, min as _min, sortedUniq as _sortedUniq } from 'lodash';
 import { AutoUnsubscribe } from 'ngx-auto-unsubscribe';
 import { forkJoin } from 'rxjs';
 import { ApiService } from '../../services/api.service';
@@ -54,9 +54,7 @@ export class DialogNewRsuComponent implements OnInit, OnDestroy {
         }),
         upstream: this.fb.group({
             targets: [1, [CustomValidators.isNumber(), Validators.min(1)]]
-        }),
-
-        paths_validation: ['']
+        })
     }, {validators: [FinalFormValidator()]});
 
     constructor(@Inject(MAT_DIALOG_DATA) public routeIdEdit: any, private fb: FormBuilder, private api: ApiService, private globals: GlobalsService, private toast: ToastService, public dialogRef: MatDialogRef<DialogNewRsuComponent>, private dialogHelper: DialogHelperService) { }
@@ -241,11 +239,6 @@ function FinalFormValidator(): ValidatorFn {
         const protos = fg.get('route.protocols').value;
         let valid = true;
 
-        // For http or https, at least one of methods or paths;
-        if ((protos.includes('http') || protos.includes('https')) && _isEmpty(fg.get('route.methods').value) && _isEmpty(fg.get('paths_validation').value)) {
-            valid = false;
-        }
-
         return valid ? null : {finalValidation: protos};
     };
 }
diff --git a/src/styles.scss b/src/styles.scss
@@ -88,3 +88,7 @@ footer {
 ::-webkit-scrollbar-thumb {
     background: #009688;
 }
+
+.mat-grid-tile.custom .mat-grid-tile-content {
+    justify-content: start !important;
+}