feat: clear cache on demand in settings page

Author: Leonardo Chaia

src/app/settings/cache-clear-card/cache-clear-card.component.html

@@ -0,0 +1,25 @@
+<mat-card fxLayout="row"
+          fxLayoutAlign="start center"
+          fxLayoutGap="8px"
+          style="margin-bottom: 16px;">
+  <mat-icon class="tim-icon-48 tim-text-primary">cached</mat-icon>
+
+  <div fxFlex="fill">
+    <h3 class="tim-text-title"
+        style="margin:0">
+      Cache
+    </h3>
+  </div>
+
+  <div [fxFlex]="loading ? '20' : ''">
+    <button mat-button
+            *ngIf="!loading; else loadingTemplate"
+            (click)="clearCache()">
+      <mat-icon>delete_forever</mat-icon>
+      Clear Cache
+    </button>
+    <ng-template #loadingTemplate>
+      <tim-loading></tim-loading>
+    </ng-template>
+  </div>
+</mat-card>

src/app/settings/cache-clear-card/cache-clear-card.component.scss

@@ -0,0 +1,33 @@
+import { Component } from '@angular/core';
+import { TimCacheService } from '../../tim-cache/tim-cache.service';
+import { NotificationService } from '../../shared/notification.service';
+
+@Component({
+  selector: 'tim-cache-clear-card',
+  templateUrl: './cache-clear-card.component.html',
+  styleUrls: ['./cache-clear-card.component.scss']
+})
+export class CacheClearCardComponent {
+
+  public loading = false;
+
+  constructor(
+    private readonly cache: TimCacheService,
+    private readonly notification: NotificationService) { }
+
+  public clearCache() {
+    this.loading = true;
+    this.cache.clear()
+      .subscribe(() => {
+        this.loading = false;
+        this.notification.open('Cache has been cleared');
+      }, e => {
+        this.loading = false;
+        this.notification.open(e.message, null, {
+          panelClass: 'tim-bg-warn',
+        });
+        console.error(e);
+      });
+  }
+
+}

src/app/settings/cache-clear-card/cache-clear-card.component.ts

@@ -128,6 +128,8 @@ <h2 class="tim-text-title">
 
   </div>
 
+  <tim-cache-clear-card></tim-cache-clear-card>
+
   <mat-card fxLayout="row"
             fxLayoutAlign="start center"
             fxLayoutGap="8px"

src/app/settings/settings-container/settings-container.component.html

@@ -12,6 +12,7 @@ import { SharedModule } from '../shared/shared.module';
 import { SettingsUpdaterComponent } from './settings-updater/settings-updater.component';
 import { JobsModule } from '../jobs/jobs.module';
 import { HttpClientModule } from '@angular/common/http';
+import { CacheClearCardComponent } from './cache-clear-card/cache-clear-card.component';
 
 @NgModule({
   imports: [
@@ -38,6 +39,7 @@ import { HttpClientModule } from '@angular/common/http';
     SettingsContainerComponent,
     RegistrySettingsModalComponent,
     SettingsUpdaterComponent,
+    CacheClearCardComponent,
   ],
   entryComponents: [
     RegistrySettingsModalComponent,