199 frontend module refactor homepage design

apps/frontend/src/app/app.component.html

@@ -18,7 +18,7 @@
               routerLinkActive="active"
               routerLink="email-receiver"
               class="nav-text"
-              >Email Receiver</span
+            >Email Receiver</span
             >
           </button>
         </clr-dropdown-menu>
@@ -41,10 +41,19 @@
               clrVerticalNavLink
               clrAriaCurrentLink
               routerLink="/"
+              [routerLinkActiveOptions]="{ exact: true }"
               routerLinkActive="active"
               class="nav-link"
-              ><span class="nav-text">Overview</span></a
-            >
+            ><span class="nav-text">Overview</span></a>
+            <a
+              clrVerticalNavLink
+              clrAriaCurrentLink
+              routerLink="/backup-statistics"
+              [routerLinkActiveOptions]="{ exact: true }"
+              routerLinkActive="active"
+              class="nav-link"
+            ><span class="nav-text">Backup Statistics</span>
+            </a>
           </clr-vertical-nav-group-children>
         </clr-vertical-nav-group>
 

apps/frontend/src/app/app.component.spec.ts

@@ -52,7 +52,7 @@ describe('AppComponent', () => {
 
   it('should have navigation items', () => {
     const navItems = fixture.debugElement.queryAll(By.css('.nav-text'));
-    const expectedNavItems = ['Dashboard', 'Overview', 'Upload', 'Find Data'];
+    const expectedNavItems = ['Dashboard', 'Overview', 'Backup Statistics', 'Upload', 'Find Data'];
 
     // Use a Set to get unique nav item texts
     const uniqueNavItems = [
@@ -67,7 +67,7 @@ describe('AppComponent', () => {
 
   it('should have router links configured', () => {
     const routerLinks = fixture.debugElement.queryAll(By.css('[routerLink]'));
-    const expectedRoutes = ['/', '/', '/upload', '/findData'];
+    const expectedRoutes = ['/', '/', '/backup-statistics', '/upload', '/findData'];
 
     routerLinks.forEach((link, index) => {
       expect(link.nativeElement.getAttribute('routerLink')).toBe(

apps/frontend/src/app/app.module.ts

@@ -17,6 +17,7 @@ import {
   envelopeIcon,
   errorStandardIcon,
   filterIcon,
+  helpIcon,
   homeIcon,
   lockIcon,
   plusIcon,
@@ -30,23 +31,24 @@ import {
 import { NgxEchartsModule } from 'ngx-echarts';
 import { TestUploadComponent } from './test-upload/component/test-upload/test-upload.component';
 import { FindTestDataComponent } from './test-upload/component/find-test-data/find-test-data.component';
-import { BackupsComponent } from './backups-overview/component/backups.component';
+import { OverviewPageComponent } from './backups-overview-page/component/overview-page.component';
 import { BASE_URL } from './shared/types/configuration';
-import { AlertComponent } from './alert/component/alert.component';
+import { AlertComponent } from './backups-overview-page/component/alert-panel/component/alert.component';
 import { NotificationSettingsComponent } from './management/components/settings/notification-settings/notification-settings.component';
 import { EmailReceiverSettingsComponent } from './management/components/settings/email-receiver-settings/email-receiver-settings.component';
 import { ConfirmDialogComponent } from './shared/components/confirm-dialog/component/confirm-dialog/confirm-dialog.component';
-import { DataStoresComponent } from './data-stores/component/data-stores.component';
-import { InformationPanelComponent } from './backups-overview/component/information-panel/information-panel.component';
-import { BackupTableComponent } from './backups-overview/component/backup-table/backup-table.component';
-import { SidePanelComponent } from './backups-overview/component/side-panel/side-panel.component';
+import { DataStoresComponent } from './backups-overview-page/component/data-stores-panel/data-stores.component';
+import { InformationPanelComponent } from './backups-overview-page/component/information-panel/information-panel.component';
+import { BackupTableComponent } from './backup-statistics-page/component/backup-table/backup-table.component';
+import { SidePanelComponent } from './shared/components/filter-side-panel/side-panel.component';
+import { BackupStatisticsPageComponent } from './backup-statistics-page/component/backup-statistics-page.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     TestUploadComponent,
     FindTestDataComponent,
-    BackupsComponent,
+    OverviewPageComponent,
     AlertComponent,
     NotificationSettingsComponent,
     EmailReceiverSettingsComponent,
@@ -55,6 +57,7 @@ import { SidePanelComponent } from './backups-overview/component/side-panel/side
     InformationPanelComponent,
     BackupTableComponent,
     SidePanelComponent,
+    BackupStatisticsPageComponent
   ],
   imports: [
     BrowserModule,
@@ -88,7 +91,8 @@ export class AppModule {
       envelopeIcon,
       plusIcon,
       lockIcon,
-      trashIcon
+      trashIcon,
+      helpIcon
     );
   }
 }

apps/frontend/src/app/app.routes.ts

@@ -1,13 +1,15 @@
 import { Route } from '@angular/router';
 import { TestUploadComponent } from './test-upload/component/test-upload/test-upload.component';
 import { FindTestDataComponent } from './test-upload/component/find-test-data/find-test-data.component';
-import { BackupsComponent } from './backups-overview/component/backups.component';
+import { OverviewPageComponent } from './backups-overview-page/component/overview-page.component';
 import { EmailReceiverSettingsComponent } from './management/components/settings/email-receiver-settings/email-receiver-settings.component';
+import { BackupStatisticsPageComponent } from './backup-statistics-page/component/backup-statistics-page.component';
 
 export const appRoutes: Route[] = [
   { path: 'upload', component: TestUploadComponent },
   { path: 'findData', component: FindTestDataComponent },
   { path: 'email-receiver', component: EmailReceiverSettingsComponent},
-  { path: '', component: BackupsComponent },
+  { path: 'backup-statistics', component: BackupStatisticsPageComponent },
+  { path: '', component: OverviewPageComponent },
 
 ];

apps/frontend/src/app/backup-statistics-page/component/backup-statistics-page.component.css

@@ -0,0 +1,33 @@
+.header {
+    background-color: white;
+    justify-content: space-around;
+    position: relative;
+}
+
+.card-block {
+    padding: 20px;
+}
+
+.clr-form-control {
+    margin-top: 0;
+}
+
+.card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.card-header-title {
+    margin: 0;
+    font-weight: 500;
+}
+
+.card-header-actions {
+    display: flex;
+    align-items: center;
+}
+
+:host ::ng-deep .card-header {
+    border-bottom: none !important;
+}

apps/frontend/src/app/backups-overview/component/backups.component.html → apps/frontend/src/app/backup-statistics-page/component/backup-statistics-page.component.html

@@ -1,11 +1,7 @@
-<h1 class="header">Backups Overview</h1>
-<div class="alert-info-section">
-  <app-alert class="alert-panel"></app-alert>
-  <app-information-panel class="info"></app-information-panel>
-</div>
+<h1 class="header">Backups Statistics</h1>
 
 <div class="clr-row">
-  <app-data-stores class="clr-col-12"></app-data-stores>
+  <app-backup-table class="clr-col-lg-12 clr-col-lg-12"></app-backup-table>
 </div>
 
 <div class="clr-row">
@@ -27,7 +23,7 @@ <h1 class="header">Backups Overview</h1>
       </div>
       <div class="card-block">
         <div
-          id="overviewSizeColumnChart"
+          id="backupStatisticsPageSizeColumnChart"
           class="mt-4"
           style="width: 100%; height: 400px"
         ></div>
@@ -53,13 +49,10 @@ <h1 class="header">Backups Overview</h1>
       </div>
 
       <div class="card-block">
-        <div id="overviewSizePieChart" style="width: 100%; height: 400px"></div>
+        <div id="backupStatisticsPageSizePieChart" style="width: 100%; height: 400px"></div>
       </div>
     </div>
   </div>
 </div>
-<div class="clr-row">
-  <app-backup-table class="clr-col-lg-12 clr-col-lg-12"></app-backup-table>
-</div>
 
 <app-side-panel [isOpen]="filterPanel" [charts]="charts"></app-side-panel>

apps/frontend/src/app/backups-overview/component/backups.component.spec.ts → apps/frontend/src/app/backup-statistics-page/component/backup-statistics-page.component.spec.ts

@@ -1,16 +1,15 @@
 import { beforeEach, describe, expect, it } from 'vitest';
 import { TestBed } from '@angular/core/testing';
+import { BackupStatisticsPageComponent } from './backup-statistics-page.component';
 
-import { BackupsComponent } from './backups.component';
-
-describe('BackupsComponent', () => {
-  let component: BackupsComponent;
+describe('BackupStatisticsPageComponent', () => {
+  let component: BackupStatisticsPageComponent;
   beforeEach(() => {
     TestBed.configureTestingModule({
-      providers: [BackupsComponent],
+      providers: [BackupStatisticsPageComponent],
     });
 
-    component = TestBed.inject(BackupsComponent);
+    component = TestBed.inject(BackupStatisticsPageComponent);
   });
 
   it('should create the component', () => {

apps/frontend/src/app/backup-statistics-page/component/backup-statistics-page.component.ts

@@ -0,0 +1,39 @@
+import { Component, ViewChild, AfterViewInit } from '@angular/core';
+import { ChartInformation } from '../../shared/types/chartInformation';
+import { ChartType } from '../../shared/enums/chartType';
+import { SidePanelComponent } from '../../shared/components/filter-side-panel/side-panel.component';
+import { BehaviorSubject } from 'rxjs';
+import { BackupTask } from '../../shared/types/backup.task';
+
+@Component({
+  selector: 'app-backup-statistics-page',
+  templateUrl: './backup-statistics-page.component.html',
+  styleUrl: './backup-statistics-page.component.css',
+})
+export class BackupStatisticsPageComponent implements AfterViewInit {
+  @ViewChild(SidePanelComponent) sidePanelComponent!: SidePanelComponent;
+  backupTaskSubject$: BehaviorSubject<BackupTask[]> | undefined;
+  protected filterPanel = false;
+
+  readonly charts: ChartInformation[] = [
+    {
+      id: 'backupStatisticsPageSizePieChart',
+      type: ChartType.SIZEPIECHART,
+    },
+    {
+      id: 'backupStatisticsPageSizeColumnChart',
+      type: ChartType.SIZECOLUMNCHART,
+    },
+  ];
+
+  ngAfterViewInit(): void {
+    this.backupTaskSubject$ = this.sidePanelComponent.backupTaskSubject$;
+  }
+
+  /**
+   * Change the state of the filter panel to open or close it
+   */
+  protected changeFilterPanelState(): void {
+    this.filterPanel = !this.filterPanel;
+  }
+}

apps/frontend/src/app/backups-overview/component/backup-table/backup-table.component.spec.ts → apps/frontend/src/app/backup-statistics-page/component/backup-table/backup-table.component.spec.ts

@@ -5,9 +5,9 @@ import { BackupTableComponent } from './backup-table.component';
 import { Backup } from '../../../shared/types/backup';
 import { APIResponse } from '../../../shared/types/api-response';
 import { BackupType } from '../../../shared/enums/backup.types';
-import { BackupService } from '../../service/backup-service/backup-service.service';
+import { BackupService } from '../../../shared/services/backup-service/backup-service.service';
 import { ClrDatagridStateInterface } from '@clr/angular';
-import { CustomFilter } from '../backupfilter';
+import { CustomFilter } from '../../../backups-overview-page/component/backupfilter';
 
 describe('BackupTableComponent', () => {
   let component: BackupTableComponent;

apps/frontend/src/app/backups-overview/component/backup-table/backup-table.component.ts → apps/frontend/src/app/backup-statistics-page/component/backup-table/backup-table.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { CustomFilter } from '../backupfilter';
+import { CustomFilter } from '../../../backups-overview-page/component/backupfilter';
 import {
   BehaviorSubject,
   combineLatest,
@@ -12,7 +12,7 @@ import {
 } from 'rxjs';
 import { APIResponse } from '../../../shared/types/api-response';
 import { Backup } from '../../../shared/types/backup';
-import { BackupService } from '../../service/backup-service/backup-service.service';
+import { BackupService } from '../../../shared/services/backup-service/backup-service.service';
 import { BackupFilterParams } from '../../../shared/types/backup-filter-type';
 import { BackupType } from '../../../shared/enums/backup.types';
 import { ClrDatagridSortOrder, ClrDatagridStateInterface } from '@clr/angular';

apps/frontend/src/app/alert/component/alert.component.spec.ts → apps/frontend/src/app/backups-overview-page/component/alert-panel/component/alert.component.spec.ts

@@ -1,9 +1,9 @@
 import { beforeEach, describe, expect, it, Mock, vi } from 'vitest';
 import { AlertComponent } from './alert.component';
 import { of } from 'rxjs';
-import { Alert, SizeAlert } from '../../shared/types/alert';
+import { Alert, SizeAlert } from '../../../../shared/types/alert';
 import { randomUUID } from 'crypto';
-import { SeverityType } from '../../shared/enums/severityType';
+import { SeverityType } from '../../../../shared/enums/severityType';
 
 describe('AlertComponent', () => {
   let component: AlertComponent;

apps/frontend/src/app/alert/component/alert.component.ts → apps/frontend/src/app/backups-overview-page/component/alert-panel/component/alert.component.ts

@@ -1,14 +1,14 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { AlertServiceService } from '../service/alert-service.service';
+import { AlertServiceService } from '../../../../shared/services/alert-service/alert-service.service';
 import {
   Alert,
   CreationDateAlert,
   SizeAlert,
   StorageFillAlert,
-} from '../../shared/types/alert';
+} from '../../../../shared/types/alert';
 import { DatePipe } from '@angular/common';
 import { Subject, takeUntil, tap } from 'rxjs';
-import { SeverityType } from '../../shared/enums/severityType';
+import { SeverityType } from '../../../../shared/enums/severityType';
 
 @Component({
   selector: 'app-alert',
@@ -21,9 +21,9 @@ export class AlertComponent implements OnInit, OnDestroy {
   readonly DAYS = 7;
 
   alerts: Alert[] = [];
-  criticalAlertsCount: number = 0;
-  warningAlertsCount: number = 0;
-  infoAlertsCount: number = 0;
+  criticalAlertsCount = 0;
+  warningAlertsCount = 0;
+  infoAlertsCount = 0;
 
   status: 'OK' | 'Warning' | 'Critical' = 'OK';
 

apps/frontend/src/app/data-stores/component/data-stores.component.css → apps/frontend/src/app/backups-overview-page/component/data-stores-panel/data-stores.component.css

@@ -11,7 +11,7 @@
 
 .progress-bar-container {
     position: relative;
-    width: 70%;
+    width: 100%;
     display: inline-block;
     vertical-align: middle;
     --clr-progress-bg-color: #C6DCF2;
@@ -34,7 +34,7 @@
 }
 
 .card-header {
-    background-color: #f5f5f5;
+    background-color: #f3f8fb;
     padding: 10px;
     border-bottom: 1px solid #dcdcdc;
     display: flex;
@@ -51,7 +51,7 @@
 }
 
 .card-footer {
-    background-color: #f5f5f5;
+    background-color: #f3f8fb;
     border-top: 1px solid #dcdcdc;
     text-align: right;
     border-bottom-left-radius: 10px;

apps/frontend/src/app/data-stores/component/data-stores.component.spec.ts → apps/frontend/src/app/backups-overview-page/component/data-stores-panel/data-stores.component.spec.ts

@@ -2,7 +2,7 @@ import { beforeEach, describe, expect, it, Mock, vi } from 'vitest';
 import { of } from 'rxjs';
 import { randomUUID } from 'crypto';
 import { DataStoresComponent } from './data-stores.component';
-import { DataStore } from '../../shared/types/data-store';
+import { DataStore } from '../../../shared/types/data-store';
 
 const dataStores: DataStore[] = [
   {

apps/frontend/src/app/data-stores/component/data-stores.component.ts → apps/frontend/src/app/backups-overview-page/component/data-stores-panel/data-stores.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnDestroy } from '@angular/core';
-import { DataStoresService } from '../service/data-stores-service.service';
+import { DataStoresService } from '../../../shared/services/data-stores-service/data-stores-service.service';
 import { map, Observable, shareReplay, Subject, takeUntil } from 'rxjs';
-import { DataStore } from '../../shared/types/data-store';
+import { DataStore } from '../../../shared/types/data-store';
 
 @Component({
   selector: 'app-data-stores',