fix logs colors and improve notifications screen

ui/src/app/components/logs/logs.page.ts

@@ -89,7 +89,7 @@ export class LogsPage {
 
       const container = document.getElementById('container')
       const newLogs = document.getElementById('template').cloneNode(true) as HTMLElement
-      newLogs.innerHTML = logs.map(l => `${l.timestamp} ${l.message}`).join('\n\n') + (logs.length ? '\n\n' : '')
+      newLogs.innerHTML = logs.map(l => `${l.timestamp} ${convert.toHtml(l.message)}`).join('\n\n') + (logs.length ? '\n\n' : '')
       container.append(newLogs)
       this.loadingMore = false
       this.scrollEvent()

ui/src/app/pages/notifications/notifications.page.html

@@ -53,29 +53,31 @@
     <ng-container *ngIf="notifications.length">
       <ion-item-group style="margin-bottom: 16px;">
         <ion-item-divider>
-          <ion-button slot="end" fill="clear" (click)="deleteAll()">
-            <ion-icon slot="start" name="trash-outline"></ion-icon>
+          <ion-button slot="end" fill="clear" (click)="presentAlertDeleteAll()">
             Delete All
           </ion-button>
         </ion-item-divider>
         <ion-item *ngFor="let not of notifications; let i = index">
           <ion-label>
             <h2>
-              <ion-text [color]="not | notificationColor"><b>{{ not.title }}</b></ion-text>
+              <b>
+                <span *ngIf="not['package-id']">{{ not['package-id'] }} - </span>
+                <ion-text [color]="not | notificationColor">{{ not.title }}</ion-text>
+              </b>
             </h2>
             <h2 class="notification-message">
               {{ not.message }}
-              <a *ngIf="not.code === 1" style="text-decoration: none; cursor: pointer;" (click)="viewBackupReport(not)">
-                - View Report
-              </a>
             </h2>
             <p>
               {{ not['created-at'] | date: 'short' }}
-              <a *ngIf="not['package-id'] as pkgId" style="text-decoration: none;" [routerLink]="['/services', not['package-id']]">
-                - {{ not['package-id'] }} 
-              </a>
             </p>
           </ion-label>
+          <ion-button *ngIf="not.code === 1" slot="end" fill="clear" color="dark" (click)="viewBackupReport(not)">
+            View Report
+          </ion-button>
+          <ion-button *ngIf="not['package-id']" slot="end" fill="clear" color="dark" [routerLink]="['/services', not['package-id']]">
+            View Service
+          </ion-button>
           <ion-button slot="end" fill="clear" (click)="delete(not.id, i)">
             <ion-icon slot="icon-only" name="close"></ion-icon>
           </ion-button>

ui/src/app/pages/notifications/notifications.page.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { ServerNotification, ServerNotifications } from 'src/app/services/api/api.types'
-import { LoadingController, ModalController } from '@ionic/angular'
+import { AlertController, LoadingController, ModalController } from '@ionic/angular'
 import { ActivatedRoute } from '@angular/router'
 import { ErrorToastService } from 'src/app/services/error-toast.service'
 import { BackupReportPage } from 'src/app/modals/backup-report/backup-report.page'
@@ -21,6 +21,7 @@ export class NotificationsPage {
 
   constructor (
     private readonly embassyApi: ApiService,
+    private readonly alertCtrl: AlertController,
     private readonly loadingCtrl: LoadingController,
     private readonly modalCtrl: ModalController,
     private readonly errToast: ErrorToastService,
@@ -71,7 +72,40 @@ export class NotificationsPage {
     }
   }
 
-  async deleteAll (): Promise<void> {
+  async presentAlertDeleteAll () {
+    const alert = await this.alertCtrl.create({
+      backdropDismiss: false,
+      header: 'Delete All?',
+      message: 'Are you sure you want to delete all notifications?',
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+        },
+        {
+          text: 'Delete',
+          cssClass: 'enter-click',
+          handler: () => {
+            this.deleteAll()
+          },
+        },
+      ],
+    })
+    await alert.present()
+  }
+
+  async viewBackupReport (notification: ServerNotification<1>) {
+    const modal = await this.modalCtrl.create({
+      component: BackupReportPage,
+      componentProps: {
+        report: notification.data,
+        timestamp: notification['created-at'],
+      },
+    })
+    await modal.present()
+  }
+
+  private async deleteAll (): Promise<void> {
     const loader = await this.loadingCtrl.create({
       spinner: 'lines',
       message: 'Deleting...',
@@ -89,16 +123,5 @@ export class NotificationsPage {
       loader.dismiss()
     }
   }
-
-  async viewBackupReport (notification: ServerNotification<1>) {
-    const modal = await this.modalCtrl.create({
-      component: BackupReportPage,
-      componentProps: {
-        report: notification.data,
-        timestamp: notification['created-at'],
-      },
-    })
-    await modal.present()
-  }
 }
 

ui/src/app/services/api/api.fixures.ts

@@ -752,7 +752,7 @@ export module Mock {
     },
     {
       id: 2,
-      'package-id': 'bitcoind',
+      'package-id': null,
       'created-at': '2019-12-26T14:20:30.872Z',
       code: 2,
       level: NotificationLevel.Warning,
@@ -762,7 +762,7 @@ export module Mock {
     },
     {
       id: 3,
-      'package-id': 'bitcoind',
+      'package-id': null,
       'created-at': '2019-12-26T14:20:30.872Z',
       code: 3,
       level: NotificationLevel.Info,