closes #2340 and #2431, fixes bug with select all for backup (#2780)

* closes #2340 and #2431, fixes bug with select all for backup

* revefrt mock

web/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "startos-ui",
-  "version": "0.3.6-alpha.6",
+  "version": "0.3.6-alpha.8",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "startos-ui",
-      "version": "0.3.6-alpha.6",
+      "version": "0.3.6-alpha.8",
       "license": "MIT",
       "dependencies": {
         "@angular/animations": "^14.1.0",

web/projects/ui/src/app/modals/backup-select/backup-select.page.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core'
 import { ModalController } from '@ionic/angular'
-import { map, take } from 'rxjs/operators'
+import { map } from 'rxjs/operators'
 import { DataModel } from 'src/app/services/patch-db/data-model'
 import { PatchDB } from 'patch-db-client'
 import { firstValueFrom } from 'rxjs'
@@ -13,7 +13,7 @@ import { getManifest } from 'src/app/util/get-package-data'
 })
 export class BackupSelectPage {
   hasSelection = false
-  selectAll = false
+  selectAll = true
   pkgs: {
     id: string
     title: string

web/projects/ui/src/app/pages/diagnostic-routes/home/home.page.html

@@ -1,12 +1,10 @@
 <ion-content>
   <div style="padding: 48px">
     <ng-container *ngIf="!restarted; else refresh">
-      <h1
-        class="ion-text-center"
-        style="padding-bottom: 36px; font-size: calc(2vw + 14px)"
-      >
-        StartOS - Diagnostic Mode
-      </h1>
+      <div class="ion-text-center" style="padding-bottom: 36px">
+        <h1 style="font-size: calc(2vw + 14px)">StartOS - Diagnostic Mode</h1>
+        <p>StartOS version: {{ config.version }}</p>
+      </div>
 
       <ng-container *ngIf="error">
         <h2

web/projects/ui/src/app/pages/diagnostic-routes/home/home.page.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core'
 import { AlertController } from '@ionic/angular'
 import { LoadingService } from '@start9labs/shared'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
+import { ConfigService } from 'src/app/services/config.service'
 
 @Component({
   selector: 'diagnostic-home',
@@ -22,6 +23,7 @@ export class HomePage {
     private readonly loader: LoadingService,
     private readonly api: ApiService,
     private readonly alertCtrl: AlertController,
+    readonly config: ConfigService,
   ) {}
 
   async ngOnInit() {

web/projects/ui/src/app/pages/diagnostic-routes/logs/logs.page.html

@@ -4,6 +4,16 @@
       <ion-back-button defaultHref="/"></ion-back-button>
     </ion-buttons>
     <ion-title>Logs</ion-title>
+    <ion-button
+      slot="end"
+      class="ion-padding-end"
+      fill="clear"
+      strong
+      (click)="download()"
+    >
+      Download
+      <ion-icon slot="end" name="download-outline"></ion-icon>
+    </ion-button>
   </ion-toolbar>
 </ion-header>
 

web/projects/ui/src/app/pages/diagnostic-routes/logs/logs.page.ts

@@ -1,6 +1,12 @@
 import { Component, ViewChild } from '@angular/core'
 import { IonContent } from '@ionic/angular'
-import { ErrorService, toLocalIsoString } from '@start9labs/shared'
+import {
+  DownloadHTMLService,
+  ErrorService,
+  LoadingService,
+  Log,
+  toLocalIsoString,
+} from '@start9labs/shared'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
 
 var Convert = require('ansi-to-html')
@@ -24,6 +30,8 @@ export class LogsPage {
   constructor(
     private readonly api: ApiService,
     private readonly errorService: ErrorService,
+    private readonly loader: LoadingService,
+    private readonly downloadHtml: DownloadHTMLService,
   ) {}
 
   async ngOnInit() {
@@ -47,6 +55,30 @@ export class LogsPage {
     e.target.complete()
   }
 
+  async download() {
+    const loader = this.loader.open('Processing 10,000 logs...').subscribe()
+
+    try {
+      const { entries } = await this.api.diagnosticGetLogs({
+        before: true,
+        limit: 10000,
+      })
+
+      const styles = {
+        'background-color': '#222428',
+        color: '#e0e0e0',
+        'font-family': 'monospace',
+      }
+      const html = this.convertToAnsi(entries)
+
+      this.downloadHtml.download('diagnostic-logs.html', html, styles)
+    } catch (e: any) {
+      this.errorService.handleError(e)
+    } finally {
+      loader.unsubscribe()
+    }
+  }
+
   private async getLogs() {
     try {
       const { startCursor, entries } = await this.api.diagnosticGetLogs({
@@ -92,4 +124,15 @@ export class LogsPage {
       this.errorService.handleError(e)
     }
   }
+
+  private convertToAnsi(entries: Log[]) {
+    return entries
+      .map(
+        entry =>
+          `<span style="color: #FFF; font-weight: bold;">${toLocalIsoString(
+            new Date(entry.timestamp),
+          )}</span>&nbsp;&nbsp;${convert.toHtml(entry.message)}`,
+      )
+      .join('<br />')
+  }
 }