From 1b0a1cc7a05d36a936c965711bb54046c227b718 Mon Sep 17 00:00:00 2001
From: tidusjar <tidusjar@gmail.com>
Date: Tue, 23 Nov 2021 13:57:29 +0000
Subject: [PATCH] refactor(settings): :lipstick: Added a banner when you are
 using a SQLite database, to infom that MySQL database configuration is
 available

---
 src/Ombi/ClientApp/angular.json               |  8 +++++++-
 .../app/settings/about/about.component.html   | 20 +++++++++++--------
 .../app/settings/about/about.component.scss   | 15 ++++++++++++--
 .../src/app/settings/about/about.component.ts | 14 +++++++++++--
 4 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/src/Ombi/ClientApp/angular.json b/src/Ombi/ClientApp/angular.json
index 76749756d..4fda4b82b 100644
--- a/src/Ombi/ClientApp/angular.json
+++ b/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
             }
           }
         },
diff --git a/src/Ombi/ClientApp/src/app/settings/about/about.component.html b/src/Ombi/ClientApp/src/app/settings/about/about.component.html
index b823bdc7a..bf7e4b0b9 100644
--- a/src/Ombi/ClientApp/src/app/settings/about/about.component.html
+++ b/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>
diff --git a/src/Ombi/ClientApp/src/app/settings/about/about.component.scss b/src/Ombi/ClientApp/src/app/settings/about/about.component.scss
index daeccd03a..55d4a9765 100644
--- a/src/Ombi/ClientApp/src/app/settings/about/about.component.scss
+++ b/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;
-  }
\ No newline at end of file
+  }
+
+  .container-alert {
+    margin-left: 3%;
+    margin-right: 3%;
+    color: white;
+    background-color: $ombi-background-accent;
+    border-color: $warn;
+  }
+
diff --git a/src/Ombi/ClientApp/src/app/settings/about/about.component.ts b/src/Ombi/ClientApp/src/app/settings/about/about.component.ts
index 688669c01..e0bc3c661 100644
--- a/src/Ombi/ClientApp/src/app/settings/about/about.component.ts
+++ b/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,