feat(console-v2): save table filters as queryparams, smtp update (#3624)

* show warn for missing smtp

* org table, failed events, views table fallback, org table filters

* log notification providers, user filter, copy to clip fix

* lint

Co-authored-by: Livio Amstutz <[email protected]>

console/src/app/modules/info-section/info-section.component.html

@@ -1,8 +1,12 @@
-<div class="info-section-row" [ngClass]="{'info': type === 'INFO', 'warn': type === 'WARN'}">
-    <i *ngIf="type === 'INFO'" class="icon las la-info"></i>
-    <i *ngIf="type === 'WARN'" class="icon las la-exclamation"></i>
+<div
+  class="info-section-row"
+  [ngClass]="{ info: type === 'INFO', warn: type === 'WARN', alert: type === 'ALERT', fit: fitWidth }"
+>
+  <i *ngIf="type === 'INFO'" class="icon las la-info"></i>
+  <i *ngIf="type === 'WARN'" class="icon las la-exclamation"></i>
+  <i *ngIf="type === 'ALERT'" class="icon las la-exclamation"></i>
 
-    <div class="info-section-content">
-        <ng-content></ng-content>
-    </div>
+  <div class="info-section-content">
+    <ng-content></ng-content>
+  </div>
 </div>

console/src/app/modules/info-section/info-section.component.scss

@@ -10,23 +10,27 @@
   .info-section-row {
     display: flex;
     border-radius: 4px;
-    padding: .5rem 0;
+    padding: 0.5rem 0;
     padding-right: 1rem;
     font-size: 14px;
-    margin: .5rem 0;
+    margin: 0.5rem 0;
+
+    &.fit {
+      width: fit-content;
+    }
 
     .icon {
       margin-right: 1rem;
       height: 1.2rem;
       line-height: 1.2rem;
       font-size: 1.2rem;
-      margin-left: .5rem;
-      padding: .25rem 0;
+      margin-left: 0.5rem;
+      padding: 0.25rem 0;
     }
 
     .info-section-content {
       flex: 1;
-      padding: .25rem 0;
+      padding: 0.25rem 0;
     }
 
     &.info {
@@ -55,5 +59,14 @@
         color: map-get($foreground, warninfosection);
       }
     }
+
+    &.alert {
+      background-color: map-get($background, alertinfosection);
+      color: map-get($foreground, alertinfosection);
+
+      .icon {
+        color: map-get($foreground, alertinfosection);
+      }
+    }
   }
 }

console/src/app/modules/info-section/info-section.component.ts

@@ -4,6 +4,7 @@ export enum InfoSectionType {
   INFO = 'INFO',
   SUCCESS = 'SUCCESS',
   WARN = 'WARN',
+  ALERT = 'ALERT',
 }
 
 @Component({
@@ -12,6 +13,6 @@ export enum InfoSectionType {
   styleUrls: ['./info-section.component.scss'],
 })
 export class InfoSectionComponent {
-
   @Input() type: InfoSectionType = InfoSectionType.INFO;
+  @Input() fitWidth: boolean = false;
 }