refactor(settings): 💄 Added a banner when you are using a SQLite database, to infom that MySQL database configuration is available

src/Ombi/ClientApp/angular.json

@@ -82,7 +82,13 @@
                   "replace": "src/environments/environment.ts",
                   "with": "src/environments/environment.hmr.ts"
                 }
-              ]
+              ],
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
             }
           }
         },

src/Ombi/ClientApp/src/app/settings/about/about.component.html

@@ -1,6 +1,10 @@
 <settings-menu></settings-menu>
+<div class="alert container-alert" role="alert" *ngIf="about && usingSqliteDatabase">
+  Switching to a MySQL database can drastically improve performance and stability. See how to do that here: <a href="https://docs.ombi.app/guides/migrating-databases/" target="_blank">https://docs.ombi.app/guides/migrating-databases/</a>
+</div>
 <div *ngIf="about" class="small-middle-container">
   <legend>About</legend>
+
 <div class="row">
   <div class="col-md-8">
   <div class="mat-table">
@@ -71,23 +75,23 @@
     <div class="mat-row">
       <div class="mat-cell">Application Base Path</div>
       <div class="mat-cell">{{about.applicationBasePath}}</div>
-    </div>    
-    
+    </div>
+
     <div class="mat-row">
       <div class="mat-cell">Storage Path</div>
       <div class="mat-cell">{{about.storagePath}}</div>
-    </div> 
-    
+    </div>
+
     <div class="mat-row">
       <div class="mat-cell">Ombi Database</div>
       <div class="mat-cell">{{about.ombiDatabaseType}}</div>
-    </div> 
-    
+    </div>
+
     <div class="mat-row">
       <div class="mat-cell">External Database</div>
       <div class="mat-cell">{{about.externalDatabaseType}}</div>
-    </div> 
-    
+    </div>
+
     <div class="mat-row">
       <div class="mat-cell">Settings Database</div>
       <div class="mat-cell">{{about.settingsDatabaseType}}</div>

src/Ombi/ClientApp/src/app/settings/about/about.component.scss

@@ -1,4 +1,6 @@
-.mat-table {
+@import "~styles/variables.scss";
+
+.mat-table {
     display: block;
   }
   
@@ -37,4 +39,13 @@
       white-space: nowrap;
       vertical-align: baseline;
       border-radius: 0.25rem;
-  }
+  }
+
+  .container-alert {
+    margin-left: 3%;
+    margin-right: 3%;
+    color: white;
+    background-color: $ombi-background-accent;
+    border-color: $warn;
+  }
+

src/Ombi/ClientApp/src/app/settings/about/about.component.ts

@@ -1,10 +1,11 @@
 import { Component, OnInit } from "@angular/core";
+import { HubService, SettingsService, SystemService } from "../../services";
 import { IAbout, IUpdateModel } from "../../interfaces/ISettings";
-import { SettingsService, HubService, SystemService } from "../../services";
+
 import { IConnectedUser } from "../../interfaces";
-import { UpdateService } from "../../services/update.service";
 import { MatDialog } from "@angular/material/dialog";
 import { UpdateDialogComponent } from "./update-dialog.component";
+import { UpdateService } from "../../services/update.service";
 
 @Component({
     templateUrl: "./about.component.html",
@@ -17,6 +18,15 @@ export class AboutComponent implements OnInit {
     public connectedUsers: IConnectedUser[];
     public newsHtml: string;
 
+    public get usingSqliteDatabase() {
+        if (this.about.ombiDatabaseType.toLowerCase() === 'sqlite'
+        || this.about.externalDatabaseType.toLowerCase() === 'sqlite'
+        || this.about.settingsDatabaseType.toLowerCase() === 'sqlite') {
+            return true;
+        }
+        return false;
+    }
+
     private update: IUpdateModel;
 
     constructor(private readonly settingsService: SettingsService,