Feature/frontend subscribe error (#4)

* add error subscribers to display notifications via snackbar on connection/backend errors * reformat * use css --------- Co-authored-by: Gaétan Collaud <[email protected]>
spoud · Feb 8, 2024 · 67c40d2 · 67c40d2
1 parent c01785e
commit 67c40d2
Show file tree

Hide file tree

Showing 28 changed files with 364 additions and 347 deletions.
diff --git a/frontend/angular.json b/frontend/angular.json
@@ -102,5 +102,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }
diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
@@ -1,16 +1,16 @@
 <mat-toolbar color="primary">
-  <span> Kafka cost control </span>
+    <span> Kafka cost control </span>
 </mat-toolbar>
 
 <nav mat-tab-nav-bar [tabPanel]="tabPanel">
-  @for (link of navLinks; track link) {
-    <a mat-tab-link
-       [routerLink]="link.path"
-       routerLinkActive #rla="routerLinkActive"
-       [active]="rla.isActive"> {{link.label}} </a>
-  }
+    @for (link of navLinks; track link) {
+        <a mat-tab-link
+           [routerLink]="link.path"
+           routerLinkActive #rla="routerLinkActive"
+           [active]="rla.isActive"> {{ link.label }} </a>
+    }
 </nav>
 <mat-tab-nav-panel #tabPanel>
-  <router-outlet></router-outlet>
+    <router-outlet></router-outlet>
 </mat-tab-nav-panel>
 
diff --git a/frontend/src/app/app.component.scss b/frontend/src/app/app.component.scss
@@ -0,0 +1,4 @@
+mat-tab-nav-panel{
+    padding: 32px 64px;
+    display: block;
+}
diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
@@ -2,30 +2,30 @@ import {Component} from '@angular/core';
 import {Router} from '@angular/router';
 
 interface Link {
-  path: string;
-  label: string;
+    path: string;
+    label: string;
 }
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrl: './app.component.scss'
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    styleUrl: './app.component.scss'
 })
 export class AppComponent {
-  navLinks: Link[] = [
-    {path: '/context-data', label: 'Context Data'},
-    {path: '/pricing-rules', label: 'Pricing Rules'},
-    {path: '/others', label: 'Others'},
-  ]
-  activeLink: Link = this.navLinks[0];
+    navLinks: Link[] = [
+        {path: '/context-data', label: 'Context Data'},
+        {path: '/pricing-rules', label: 'Pricing Rules'},
+        {path: '/others', label: 'Others'},
+    ]
+    activeLink: Link = this.navLinks[0];
 
-  constructor(private router: Router) {
+    constructor(private router: Router) {
 
-  }
+    }
 
-  ngOnInit(): void {
-    this.router.events.subscribe((res) => {
-      this.activeLink = this.navLinks.find(tab => tab.path === '.' + this.router.url) || this.activeLink;
-    });
-  }
+    ngOnInit(): void {
+        this.router.events.subscribe((res) => {
+            this.activeLink = this.navLinks.find(tab => tab.path === '.' + this.router.url) || this.activeLink;
+        });
+    }
 }
diff --git a/frontend/src/app/app.config.ts b/frontend/src/app/app.config.ts
@@ -1,9 +1,9 @@
-import { ApplicationConfig } from '@angular/core';
-import { provideRouter } from '@angular/router';
+import {ApplicationConfig} from '@angular/core';
+import {provideRouter} from '@angular/router';
 
-import { routes } from './app.routes';
-import { provideAnimations } from '@angular/platform-browser/animations';
+import {routes} from './app.routes';
+import {provideAnimations} from '@angular/platform-browser/animations';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes), provideAnimations()]
+    providers: [provideRouter(routes), provideAnimations()]
 };
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
@@ -2,36 +2,33 @@ import {NgModule} from '@angular/core';
 import {GraphQLModule} from './graphql.module';
 import {HttpClientModule} from '@angular/common/http';
 import {AppComponent} from './app.component';
-import {MatTableModule} from '@angular/material/table';
 import {BrowserModule} from '@angular/platform-browser';
-import {MatSortModule} from '@angular/material/sort';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {MatTabsModule} from '@angular/material/tabs';
 import {MatToolbarModule} from '@angular/material/toolbar';
 import {routes} from './app.routes';
 import {RouterModule} from '@angular/router';
-import {MaterialModule} from './common/material.module';
 import {MAT_DATE_LOCALE} from "@angular/material/core";
 
 
 @NgModule({
-  imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-    HttpClientModule,
-    RouterModule.forRoot(routes),
+    imports: [
+        BrowserModule,
+        BrowserAnimationsModule,
+        HttpClientModule,
+        RouterModule.forRoot(routes),
 
-    MatTabsModule,
-    MatToolbarModule,
-    GraphQLModule,
-  ],
-  declarations: [
-    AppComponent,
-  ],
-  providers: [
-    { provide: MAT_DATE_LOCALE, useValue: 'fr-CH' }
-  ],
-  bootstrap: [AppComponent]
+        MatTabsModule,
+        MatToolbarModule,
+        GraphQLModule,
+    ],
+    declarations: [
+        AppComponent,
+    ],
+    providers: [
+        {provide: MAT_DATE_LOCALE, useValue: 'fr-CH'}
+    ],
+    bootstrap: [AppComponent]
 })
 export class AppModule {
 }
diff --git a/frontend/src/app/app.routes.ts b/frontend/src/app/app.routes.ts
@@ -1,21 +1,21 @@
 import {Routes} from '@angular/router';
 
 export const routes: Routes = [
-  {
-    path: 'context-data',
-    loadChildren: () => import('./tab-context-data/tab-context-data.module').then(m => m.TabContextDataModule)
-  },
-  {
-    path: 'pricing-rules',
-    loadChildren: () => import('./tab-pricing-rules/tab-pricing-rules.module').then(m => m.TabPricingRulesModule)
-  },
-  {
-    path: 'others',
-    loadChildren: () => import('./tab-others/tab-others.module').then(m => m.TabOthersModule)
-  },
-  {
-    path: '',
-    redirectTo: '/context-data',
-    pathMatch: 'full'
-  }
+    {
+        path: 'context-data',
+        loadChildren: () => import('./tab-context-data/tab-context-data.module').then(m => m.TabContextDataModule)
+    },
+    {
+        path: 'pricing-rules',
+        loadChildren: () => import('./tab-pricing-rules/tab-pricing-rules.module').then(m => m.TabPricingRulesModule)
+    },
+    {
+        path: 'others',
+        loadChildren: () => import('./tab-others/tab-others.module').then(m => m.TabOthersModule)
+    },
+    {
+        path: '',
+        redirectTo: '/context-data',
+        pathMatch: 'full'
+    }
 ];
diff --git a/frontend/src/app/common/map-display/map-display.component.html b/frontend/src/app/common/map-display/map-display.component.html
@@ -1,5 +1,5 @@
 <ul>
-  @for (item of entries(); track item.key) {
-    <li>{{ item.key }} = {{ item.value }}</li>
-  }
+    @for (item of entries(); track item.key) {
+        <li>{{ item.key }} = {{ item.value }}</li>
+    }
 </ul>
diff --git a/frontend/src/app/common/map-display/map-display.component.ts b/frontend/src/app/common/map-display/map-display.component.ts
@@ -2,14 +2,14 @@ import {Component, input} from '@angular/core';
 import {Entry_String_String} from '../../../generated/graphql/types';
 
 @Component({
-  selector: 'app-map-display',
-  standalone: true,
-  imports: [],
-  templateUrl: './map-display.component.html',
-  styleUrl: './map-display.component.scss'
+    selector: 'app-map-display',
+    standalone: true,
+    imports: [],
+    templateUrl: './map-display.component.html',
+    styleUrl: './map-display.component.scss'
 })
 export class MapDisplayComponent {
 
-  entries = input.required<Entry_String_String[]>();
+    entries = input.required<Entry_String_String[]>();
 
 }
diff --git a/frontend/src/app/common/material.module.ts b/frontend/src/app/common/material.module.ts
@@ -11,28 +11,28 @@ import {MatButtonModule} from "@angular/material/button";
 import {MatSnackBarModule} from "@angular/material/snack-bar";
 
 @NgModule({
-  declarations: [],
-  imports: [
-    CommonModule,
+    declarations: [],
+    imports: [
+        CommonModule,
 
-    MatTableModule,
-    MatSortModule,
+        MatTableModule,
+        MatSortModule,
 
-    MapDisplayComponent,
-  ],
-  exports: [
-    MatTableModule,
-    MatSortModule,
+        MapDisplayComponent,
+    ],
+    exports: [
+        MatTableModule,
+        MatSortModule,
 
-    MatFormFieldModule,
-    MatDatepickerModule,
-    MatInputModule,
-    MatButtonModule,
-    MatSnackBarModule,
+        MatFormFieldModule,
+        MatDatepickerModule,
+        MatInputModule,
+        MatButtonModule,
+        MatSnackBarModule,
 
-    MapDisplayComponent,
-  ],
-  providers: [provideNativeDateAdapter()],
+        MapDisplayComponent,
+    ],
+    providers: [provideNativeDateAdapter()],
 })
 export class MaterialModule {
 }
diff --git a/frontend/src/app/graphql.module.ts b/frontend/src/app/graphql.module.ts
@@ -5,50 +5,50 @@ import {APOLLO_OPTIONS, ApolloModule} from 'apollo-angular';
 import {setContext} from '@apollo/client/link/context';
 
 const httpLink = createHttpLink({
-  uri: '/graphql',
+    uri: '/graphql',
 });
 
 const authLink = setContext((_, {headers}) => {
-  // get the authentication token from local storage if it exists
-  const token = localStorage.getItem('token');
-  // return the headers to the context so httpLink can read them
-  return {
-    headers: {
-      ...headers,
-      authorization: token ? `Basic ${token}` : '',
+    // get the authentication token from local storage if it exists
+    const token = localStorage.getItem('token');
+    // return the headers to the context so httpLink can read them
+    return {
+        headers: {
+            ...headers,
+            authorization: token ? `Basic ${token}` : '',
+        }
     }
-  }
 });
 
 export function createApollo(): ApolloClientOptions<any> {
-  return {
-    link: authLink.concat(httpLink),
-    cache: new InMemoryCache({
-      possibleTypes: generatedFragments.possibleTypes,
-    }),
-    defaultOptions: {
-      watchQuery: {
-        errorPolicy: 'all'
-      },
-      query: {fetchPolicy: 'network-only'},
-    },
-  };
+    return {
+        link: authLink.concat(httpLink),
+        cache: new InMemoryCache({
+            possibleTypes: generatedFragments.possibleTypes,
+        }),
+        defaultOptions: {
+            watchQuery: {
+                errorPolicy: 'all'
+            },
+            query: {fetchPolicy: 'network-only'},
+        },
+    };
 }
 
 @NgModule({
-  imports: [
-    ApolloModule
-  ],
-  providers: [
-    {
-      provide: APOLLO_OPTIONS,
-      useFactory: createApollo,
-      deps: [],
-    },
-  ],
+    imports: [
+        ApolloModule
+    ],
+    providers: [
+        {
+            provide: APOLLO_OPTIONS,
+            useFactory: createApollo,
+            deps: [],
+        },
+    ],
 })
 export class GraphQLModule {
-  constructor() {
+    constructor() {
 
-  }
+    }
 }