Fix everything

frontend/datacat-ui/src/features/alerting/alerts-counts-by-status/alerts-counts-by-status.component.ts

@@ -3,8 +3,7 @@ import { AlertsCountsByStatus } from './alerts-counts-by-status.types';
 import { TagModule } from 'primeng/tag';
 import { AlertStatus } from '../../../entities';
 import { TooltipModule } from 'primeng/tooltip';
-import { from } from 'rxjs';
-import { FAKE_ALERTS_COUNTS_BY_STATUS } from '../../../shared/mock/fakes';
+import { interval } from 'rxjs';
 import { ApiService } from '../../../shared/services/datacat-generated-client';
 
 @Component({
@@ -21,6 +20,7 @@ export class AlertsCountsByStatusComponent implements OnInit {
 
   ngOnInit() {
     this.loadAlertsCountsByStatus();
+    interval(10000).subscribe(() => this.loadAlertsCountsByStatus());
   }
 
   protected loadAlertsCountsByStatus() {

frontend/datacat-ui/src/features/alerting/alerts-list/alerts-list.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { TableLazyLoadEvent, TableModule } from 'primeng/table';
-import { Alert, AlertStatus, DataSource } from '../../../entities';
+import { Alert, AlertStatus } from '../../../entities';
 import { TagModule } from 'primeng/tag';
 import { CommonModule } from '@angular/common';
 import { ButtonModule } from 'primeng/button';
@@ -26,7 +26,6 @@ import { TooltipModule } from 'primeng/tooltip';
 import { DialogModule } from 'primeng/dialog';
 import { DataSourceSelectComponent } from '../../../shared/ui/data-source-select/data-source-select.component';
 import * as urls from '../../../shared/common/urls';
-import { LazyLoadEvent } from 'primeng/api';
 
 @Component({
   standalone: true,

frontend/datacat-ui/src/features/alerting/create-alert/create-alert-button.component.html

@@ -12,66 +12,72 @@
   header="Create alert"
 >
   <form class="creation-form" [formGroup]="creationForm">
-    <div class="creation-form__item">
-      <p>Description</p>
-      <textarea
-        pInputText
-        cols="40"
-        rows="3"
-        placeholder="Description"
-        formControlName="description"
-      >
-      </textarea>
-    </div>
-    <div class="creation-form__item">
-      <p>Query</p>
-      <textarea
-        pInputText
-        cols="40"
-        rows="3"
-        placeholder="Query"
-        formControlName="query"
-      ></textarea>
-    </div>
-    <div class="creation-form__item">
-      <p>Notification Template</p>
-      <textarea
-        pInputText
-        cols="40"
-        rows="3"
-        placeholder="Template"
-        formControlName="template"
-      ></textarea>
-    </div>
-    <div class="creation-form__item">
-      <p>Execution interval</p>
-      <p-inputmask
-        mask="99:99:99"
-        placeholder="01:00:00"
-        formControlName="executionInterval"
-      />
-    </div>
-    <div class="creation-form__item">
-      <p>Notification Trigger Period</p>
-      <p-inputmask
-        mask="99:99:99"
-        placeholder="01:00:00"
-        formControlName="notificationTriggerPeriod"
-      />
-    </div>
-    <div class="creation-form__item">
-      <p>Data Source</p>
-      <datacat-data-source-select
-        [filter]="{ purpose: 'metrics' }"
-        formControlName="dataSourceId"
-      />
-    </div>
-    <div class="creation-form__item">
-      <p>Notification Group</p>
-      <datacat-notification-group-select
-        formControlName="notificationGroupName"
-        optionValue="name"
-      />
+    <div class="h">
+      <div class="v">
+        <div class="creation-form__item">
+          <p>Description</p>
+          <textarea
+            pInputText
+            cols="40"
+            rows="3"
+            placeholder="Description"
+            formControlName="description"
+          >
+          </textarea>
+        </div>
+        <div class="creation-form__item">
+          <p>Query</p>
+          <textarea
+            pInputText
+            cols="40"
+            rows="3"
+            placeholder="Query"
+            formControlName="query"
+          ></textarea>
+        </div>
+        <div class="creation-form__item">
+          <p>Notification Template</p>
+          <textarea
+            pInputText
+            cols="40"
+            rows="3"
+            placeholder="Template"
+            formControlName="template"
+          ></textarea>
+        </div>
+      </div>
+      <div class="v">
+        <div class="creation-form__item">
+          <p>Execution interval</p>
+          <p-inputmask
+            mask="99:99:99"
+            placeholder="01:00:00"
+            formControlName="executionInterval"
+          />
+        </div>
+        <div class="creation-form__item">
+          <p>Notification Trigger Period</p>
+          <p-inputmask
+            mask="99:99:99"
+            placeholder="01:00:00"
+            formControlName="notificationTriggerPeriod"
+          />
+        </div>
+        <div class="creation-form__item">
+          <p>Data Source</p>
+          <datacat-data-source-select
+            [filter]="{ purpose: 'metrics' }"
+            formControlName="dataSourceId"
+          />
+        </div>
+        <div class="creation-form__item">
+          <p>Notification Group</p>
+          <datacat-notification-group-select
+            formControlName="notificationGroupName"
+            optionValue="name"
+          />
+        </div>
+      </div>
     </div>
     <div class="creation-form__item">
       <p>Tags</p>
@@ -97,13 +103,37 @@
         />
       }
     </div>
+    <div class="validations">
+      @if (descriptionControl.invalid) {
+        <p>* Description is required</p>
+      }
+      @if (queryControl.invalid) {
+        <p>* Query is required</p>
+      }
+      @if (templateControl.invalid) {
+        <p>* Notification temlplate is required</p>
+      }
+      @if (executionIntervalControl.invalid) {
+        <p>* Execution interval is required</p>
+      }
+      @if (notificationTriggerPeriodControl.invalid) {
+        <p>* Notification trigger period is required</p>
+      }
+      @if (dataSourceIdControl.invalid) {
+        <p>* Data source is required</p>
+      }
+      @if (notificationGroupNameControl.invalid) {
+        <p>* Notification group is required</p>
+      }
+    </div>
   </form>
   <ng-template pTemplate="footer">
     <div class="creation-form__footer">
       <p-button
         label="Create"
         (onClick)="createAlert()"
         [loading]="isCreationInitiated"
+        [disabled]="creationForm.invalid"
       />
     </div>
   </ng-template>

frontend/datacat-ui/src/features/alerting/create-alert/create-alert-button.component.scss

@@ -25,3 +25,21 @@
     max-width: 25rem;
   }
 }
+
+.validations {
+  display: flex;
+  flex-direction: column;
+  gap: var(--p-padding-xs);
+  color: var(--p-surface-400);
+}
+
+.h {
+  display: flex;
+  gap: var(--p-padding-lg);
+}
+
+.v {
+  display: flex;
+  flex-direction: column;
+  gap: var(--p-padding-md);
+}

frontend/datacat-ui/src/features/alerting/create-alert/create-alert-button.component.ts

@@ -4,6 +4,7 @@ import { ApiService } from '../../../shared/services/datacat-generated-client';
 import { DialogModule } from 'primeng/dialog';
 import { ToastLoggerService } from '../../../shared/services/toast-logger.service';
 import {
+  AbstractControl,
   FormControl,
   FormGroup,
   ReactiveFormsModule,
@@ -76,6 +77,34 @@ export class CreateAlertButtonComponent {
     tags: new FormControl<string[]>([]),
   });
 
+  protected get descriptionControl(): AbstractControl {
+    return this.creationForm.get('description')!;
+  }
+
+  protected get templateControl(): AbstractControl {
+    return this.creationForm.get('template')!;
+  }
+
+  protected get queryControl(): AbstractControl {
+    return this.creationForm.get('query')!;
+  }
+
+  protected get dataSourceIdControl(): AbstractControl {
+    return this.creationForm.get('dataSourceId')!;
+  }
+
+  protected get notificationGroupNameControl(): AbstractControl {
+    return this.creationForm.get('notificationGroupName')!;
+  }
+
+  protected get notificationTriggerPeriodControl(): AbstractControl {
+    return this.creationForm.get('notificationTriggerPeriod')!;
+  }
+
+  protected get executionIntervalControl(): AbstractControl {
+    return this.creationForm.get('executionInterval')!;
+  }
+
   protected get creationFormTags(): string[] {
     return this.creationForm.get('tags')?.value || [];
   }
@@ -122,10 +151,12 @@ export class CreateAlertButtonComponent {
       tags: rawForm.tags,
     };
 
+    this.creationForm.disable();
     this.apiService
       .postApiV1AlertAdd(request)
       .pipe(
         finalize(() => {
+          this.creationForm.enable();
           this.isCreationInitiated = false;
         }),
       )

frontend/datacat-ui/src/features/alerting/create-notification-group/create-notification-group-button.component.html

@@ -26,6 +26,7 @@
         [loading]="isCreationInitiated"
         label="Create"
         (onClick)="createNotificationGroup()"
+        [disabled]="groupName.invalid"
       />
     </div>
   </form>

frontend/datacat-ui/src/features/alerting/create-notification-group/create-notification-group-button.component.ts

@@ -5,7 +5,12 @@ import * as urls from '../../../shared/common/urls';
 import { finalize, timer } from 'rxjs';
 import { DialogModule } from 'primeng/dialog';
 import { InputTextModule } from 'primeng/inputtext';
-import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import {
+  FormControl,
+  FormsModule,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms';
 import {
   ApiService,
   IAddNotificationChannelGroupRequest,
@@ -29,7 +34,7 @@ export class CreateNotificationGroupButtonComponent {
   protected isCreationInitiated = false;
   protected isDialogVisible = false;
 
-  protected groupName = new FormControl<string>('');
+  protected groupName = new FormControl<string>('', Validators.required);
 
   constructor(
     private router: Router,
@@ -54,7 +59,6 @@ export class CreateNotificationGroupButtonComponent {
       .subscribe({
         next: (groupId: string) => {
           this.router.navigateByUrl(urls.notificationGroupEditUrl(groupId));
-          this.loggerService.success('Successfully created notification group');
         },
         error: (e) => {
           this.loggerService.error(e);

frontend/datacat-ui/src/features/alerting/delete-alert/delete-alert-button.component.html

@@ -1,4 +1,9 @@
-<p-button label="Delete" severity="danger" (onClick)="showDeletionDialog()" />
+<p-button
+  icon="pi pi-trash"
+  severity="secondary"
+  [text]="true"
+  (onClick)="showDeletionDialog()"
+/>
 <p-dialog
   header="Delete alert?"
   [(visible)]="isDeletionDialogVisible"

frontend/datacat-ui/src/features/alerting/delete-alert/delete-alert-button.component.ts

@@ -40,7 +40,6 @@ export class DeleteAlertButtonComponent {
     if (this.alertId) {
       this.apiService.deleteApiV1AlertRemove(this.alertId).subscribe({
         next: () => {
-          this.loggerService.success('Deleted alert');
           this.router.navigateByUrl(urls.ALERTS_EXPLORER_URL);
         },
         error: (e) => {