optimization

frontend/angular.json

@@ -17,6 +17,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:application",
           "options": {
+            "statsJson": true,
             "outputPath": "dist/kafka-cost-control-frontend",
             "index": "src/index.html",
             "browser": "src/main.ts",

frontend/src/app/app.component.ts

@@ -2,9 +2,9 @@ import {Component, computed, Signal} from '@angular/core';
 import {Router, RouterLink, RouterLinkActive, RouterOutlet} from '@angular/router';
 import {CommonModule} from '@angular/common';
 import {MatTabsModule} from '@angular/material/tabs';
-import {MatToolbarModule} from '@angular/material/toolbar';
-import {MatIconModule} from '@angular/material/icon';
-import {MatButtonModule} from '@angular/material/button';
+import {MatToolbar, MatToolbarModule} from '@angular/material/toolbar';
+import {MatIcon, MatIconModule} from '@angular/material/icon';
+import {MatButton, MatButtonModule} from '@angular/material/button';
 import {BasicAuthServiceService} from './services/basic-auth-service.service';
 import {MatTooltip} from '@angular/material/tooltip';
 import {MatDialog} from '@angular/material/dialog';
@@ -21,17 +21,14 @@ interface Link {
     templateUrl: './app.component.html',
     styleUrl: './app.component.scss',
     imports: [
-        CommonModule,
-
-
         RouterLink,
         RouterLinkActive,
         RouterOutlet,
 
         MatTabsModule,
-        MatToolbarModule,
-        MatIconModule,
-        MatButtonModule,
+        MatToolbar,
+        MatIcon,
+        MatButton,
         MatTooltip
     ],
 })

frontend/src/app/common/sign-in-dialog/sign-in-dialog.component.scss

@@ -1,6 +1,14 @@
-form {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+:host {
+    width: 500px;
+    display: block;
+
+    form {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        mat-form-field {
+            width: 100%;
+        }
+    }
 }
 

frontend/src/app/common/sign-in-dialog/sign-in-dialog.component.ts

@@ -2,7 +2,6 @@ import {Component} from '@angular/core';
 import {MatButton} from "@angular/material/button";
 import {MatDialogActions, MatDialogClose, MatDialogContent, MatDialogTitle} from "@angular/material/dialog";
 import {FormControl, FormsModule, ReactiveFormsModule, Validators} from '@angular/forms';
-import {MatDatepicker, MatDatepickerInput, MatDatepickerToggle} from '@angular/material/datepicker';
 import {MatFormField, MatHint, MatLabel, MatSuffix} from '@angular/material/form-field';
 import {MatInput} from '@angular/material/input';
 import {BasicAuthServiceService} from '../../services/basic-auth-service.service';
@@ -19,12 +18,7 @@ import {DialogRef} from '@angular/cdk/dialog';
         MatButton,
         MatDialogTitle,
         MatDialogContent,
-        MatDialogActions,
-        MatDialogClose,
         FormsModule,
-        MatDatepicker,
-        MatDatepickerInput,
-        MatDatepickerToggle,
         MatFormField,
         MatHint,
         MatInput,

frontend/src/app/tab-others/others/others.component.ts

@@ -7,10 +7,18 @@ import {ApolloError} from '@apollo/client';
 import {filter, mergeMap} from 'rxjs';
 import {FormsModule} from '@angular/forms';
 import {MatButton} from '@angular/material/button';
-import {MatDatepickerModule} from '@angular/material/datepicker';
-import {MatInputModule} from '@angular/material/input';
+import {MatDatepicker, MatDatepickerModule, MatDatepickerToggle} from '@angular/material/datepicker';
+import {MatInput, MatInputModule} from '@angular/material/input';
 import {provideNativeDateAdapter} from '@angular/material/core';
-import {MatCardModule} from '@angular/material/card';
+import {
+    MatCard,
+    MatCardActions,
+    MatCardContent,
+    MatCardHeader,
+    MatCardModule,
+    MatCardTitle
+} from '@angular/material/card';
+import {MatFormField, MatHint, MatLabel} from '@angular/material/form-field';
 
 @Component({
     standalone: true,